如何在功能组件中像在类组件中一样制作onChange跟踪功能答案

【问题标题】：How to make onChange tracking function in functional component as in class component如何在功能组件中像在类组件中一样制作onChange跟踪功能
【发布时间】：2020-11-04 09:01:38
【问题描述】：

这是我的类组件

handleChange =(e) => {
   this.setState({
       [e.target.id]: e.target.value
   })
}

<div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={this.handleChange}/>
 </div>
 <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" id="password" onChange={this.handleChange}/>
 </div>

如您所见，我们可以使用一个函数组件跟踪所有输入。

但是如何得到与函数组件内部相同的结果呢？现在我正在为每个元素设置状态。

<div className="input-field">
          <label htmlFor="email">Email</label>
          <input type="email" id="email" onChange={e =>setEmail(e.target.value)}/>
       </div>
 <div className="input-field">
          <label htmlFor="password">Password</label>
          <input type="password" id="password" onChange={e => setPassword(e.target.value)}/>
 </div>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

更新类似。给定一些状态，例如data，那么处理程序可能看起来像：

const handleChange = (e) => {
  const { id, value } = e.target;
  setData((data) => ({
    ...data,
    [id]: value
  }));
};

使用功能状态更新来传播现有状态，并使用输入的 id 和来自 onChange 事件的值来更新该部分状态。

完整代码示例

function App() {
  const [data, setData] = useState({});

  const handleChange = (e) => {
    const { id, value } = e.target;
    setData((data) => ({
      ...data,
      [id]: value
    }));
  };

  return (
    <div className="App">
      <div className="input-field">
        <label htmlFor="email">Email</label>
        <input type="email" id="email" onChange={handleChange} />
      </div>
      <div className="input-field">
        <label htmlFor="password">Password</label>
        <input type="password" id="password" onChange={handleChange} />
      </div>

      <div>Email: {data.email}</div>
      <div>Password: {data.password}</div>
    </div>
  );
}

【讨论】：

【解决方案2】：

为您的功能组件声明一个包含电子邮件和密码的状态，如下所示：

let [loginInfo, setLoginInfo] = useState({email:'',password:''})

handleChange =(e) => {
    setLoginInfo({
       ...loginInfo,
       [e.target.id]: e.target.value
    })    

}

你形成

<div className="input-field">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" onChange={handleChange}/>
     </div>
<div className="input-field">
    <label htmlFor="password">Password</label>
    <input type="password" id="password" onChange={handleChange}/>
</div>

【讨论】：

【解决方案3】：

您可以创建表单输入对象并将其分配给如下状态

const [formInput, setFormInput] = useState({
    email: "",
    password: ""
  });

然后这样设置

const handleChange = (e) => {
    setFormInput((prevState) => ({
      ...prevState,
      [e.target.id]: e.target.value
    }));
  };

查看此代码框code

【讨论】：

【解决方案4】：

const [input, setInput] = useState({email:"", password:""})

<div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" value={input.email} 
            onChange={e => setInput({...input,[e.target.id]: e.target.value}}/>
 </div>
 <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" id="password" value={input.password} 
             onChange={e => setInput({...input,[e.target.id]: e.target.value}}/>
 </div>

你可以试试这个代码。通过这种方式，您可以使用相同的状态来处理两个输入，而无需处理程序

【讨论】：

OP 想要两个输入的单个处理程序。将value 属性设置为其中之一并不能解决使用一个处理程序的问题。