React 笔记②

时间：2024-10-29 07:04:59

1. 在 React 组件中，onChange 和 onBlur 是两个常用的事件处理属性，

它们分别用于处理用户输入变化时和元素失去焦点时的事件。

2. onChange={handleChangePassword} 和 onBlur={checkPassword} 分别将这两个事件绑定到了 handleChangePassword 和 checkPassword 这两个函数上

  1. onChange={handleChangePassword}：
  2. 当用户在输入框中键入字符、删除字符或以其他方式更改输入时，onChange 事件会被触发。
  3. handleChangePassword 函数作为事件处理函数，应该接收一个事件对象作为参数。在这个函数内部，您可以访问到输入框的新值，并据此执行相应的逻辑，比如更新组件的状态（useState）来存储新密码。
  4. onBlur={checkPassword}：当输入框失去焦点时（例如，用户点击了输入框之外的区域），onBlur 事件会被触发。
  5. checkPassword 函数作为事件处理函数，同样可以接收一个事件对象作为参数。但在这个场景下，更重要的是访问与输入框关联的当前值（可能通过组件的状态或直接通过事件对象的 target.value 属性）。checkPassword 函数可以执行密码验证逻辑，比如检查密码是否符合特定要求（长度、包含特定字符等），并据此显示相应的提示信息或执行其他操作。

3.  按钮的disabled属性取决于以下几个条件：

  1. !checkedTerm：用户没有同意条款。
  2. !username：用户名输入框为空。
  3. !password：密码输入框为空。
  4. isPasswordErrorForSignUp：注册时密码有错误。
  5. loading：正在进行某些加载操作。

4.  setPassword("");清空密码

所以在会员登录 和 游客登录 只需要清空密码就会触发!password 禁用按钮了

5.  const [isButtonDisabled, setIsButtonDisabled] = useState(true);

通过调用useState(true)，初始化了一个状态变量isButtonDisabled，其初始值为true。这意味着，默认情况下，按钮是被禁用的。

它展示了如何使用useState钩子（Hook）来管理组件的状态。在这个例子中，状态是关于一个按钮是否被禁用（isButtonDisabled）。

useState是React提供的一个函数，用于在函数组件中添加状态。它返回一个数组，这个数组包含两个元素：当前状态的值和一个让你更新这个状态的函数。

6.<Tabs...... <Tab.....游客登录...../>   <Tab.....新規会員登録..../>   </Tabs>

import React from 'react';  
import { Tabs } from 'antd';  
const { TabPane } = Tabs;  
  
const MyTabs = () => (  
  <Tabs defaultActiveKey="1">  
    <TabPane tab="游客登录" key="1">  
      <div>这里是游客登录的内容</div>  
    </TabPane>  
    <TabPane tab="新規会員登録" key="2">  
      <div>这里是新規会員登録的内容</div>  
    </TabPane>  
  </Tabs>  
);  
  
export default MyTabs;

在这个例子中：

  • Tabs 是 Ant Design 提供的用于创建标签页的组件。
  • TabPane 是 Tabs 组件的子组件，用于定义每个标签页的内容。
  • tab 属性定义了标签页上显示的文本。
  • key 属性是唯一的标识符，用于区分不同的标签页。
  • defaultActiveKey 属性设置了默认激活的标签页的 key。

如果你使用的是其他 UI 库，组件的名称和属性可能会有所不同，但基本的概念是相似的。

如果你没有使用任何 UI 库，而是自己实现了 Tabs 和 Tab 组件，那么代码的结构和逻辑将完全取决于你的实现。在这种情况下，你需要自己处理标签的点击事件、内容的显示和隐藏等逻辑。

7. onChange={handleChange}

在 React 中，onChange 是一个常见的事件处理属性，它通常用于处理用户输入或选择的变化。当你看到 onChange={handleChange} 这样的代码时，它意味着当相关组件（如输入框、选择框、标签页等）的值发生变化时，会调用名为 handleChange 的函数来处理这个变化。

对于标签页（Tabs）组件来说，onChange 事件可能不是直接用于处理用户输入（因为标签页通常是通过点击来切换的，而不是通过输入），但它可以用于处理标签页切换时的逻辑。

import React, { useState } from 'react'; import { Tabs, Tab } from 'some-ui-library'; // 假设的 UI 库 const MyTabs = () => { const [activeTab, setActiveTab] = useState('login'); // 初始激活的标签页 // 处理标签页切换的函数 const handleChange = (key) => { setActiveTab(key); // 这里可以添加其他逻辑，比如根据激活的标签页更新状态或执行某些操作 }; return ( <Tabs activeKey={activeTab} onChange={handleChange}> <Tab tab="游客登录" key="login"> <div>这里是游客登录的内容</div> </Tab> <Tab tab="新規会員登録" key="register"> <div>这里是新會員注册的内容</div> </Tab> {/* 可以添加更多标签页 */} </Tabs> ); }; export default MyTabs；

8.  一般密码的验证条件validatePassword 函数是一个用于验证密码强度的函数，它接收一个字符串参数 value（即用户输入的密码），并返回一个布尔值来表示密码是否满足特定的验证规则。

export function validatePassword(value: string): boolean {

  return (

    /[a-z]/.test(value) &&   // 小写

    /[A-Z]/.test(value) &&  // 大写

    /[0-9]/.test(value) &&  // 数字

    validateLength(value, 8)  // 最少8位 

  );

}

9.   setPassword(event.target.value)

import React, { useState } from 'react';

const PasswordSetter = () => { const [password, setPassword] = useState('');

// 初始化密码状态为空字符串 // 处理密码输入框变化的函数

const handlePasswordChange = (event) => { setPassword(event.target.value);

// 更新密码状态为输入框的当前值 }; // 其他组件逻辑...

return ( <div> <label> 设置密码: <input type="password" value={password}

// 将密码状态绑定到输入框的值

onChange={handlePasswordChange} // 绑定处理函数到输入框的 onChange 事件 />

</label> {/* 其他表单元素或组件... */} </div> ); };

export default PasswordSetter;

  • 使用了 useState 钩子来创建一个名为 password 的状态变量和一个名为 setPassword 的函数来更新这个状态。
  • handlePasswordChange 函数接收一个事件对象作为参数，并使用 event.target.value 来获取输入框的当前值，然后调用 setPassword 来更新状态。
  • 输入框的 value 属性被设置为 password 状态的值，这样输入框就会显示当前的密码值。
  • 输入框的 onChange 属性被设置为 handlePasswordChange 函数，这样每当输入框的值发生变化时，就会调用这个函数来处理变化。

  对你有用的话，记得点赞收藏哦  ，菜鸟小白666的笔记 仅供学习参考 谢谢

相关文章