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

Question

这是我的类组件

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>

标签： javascriptreactjs

Answer 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>
  );
}