我如何才能在 reacthooks 中为多个输入只有一个 onChange？

IT技术 reactjs react-hooks
2021-04-28 13:39:04

在 react.js 中，我为每个元素添加了一个 name 属性例如：

   handleChange1(event) {
        const {name, value} = event.target
        this.setState({[name]: value});
    }
    <input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} />

但是我如何在 react-hook 中做到这一点？例如：

           <Input
                      name="FirstName"
                      onChange={onChangeFirstName}    
                    ></Input>
const onChangeFirstName = (event) => {
    setFirstName(event.target.value);
  };

事实上，我的问题是，如果我有多个输入，我该如何为它们编写一个 handleChange 呢？

1个回答

一个月前我确实问过类似的问题，关于使用具有多个状态的钩子，一个 onChangeHandler 使用钩子：

const [name, setName] = useState({
  firstName: '',
  middleName: '',
  lastName: '',
})

const onChangeHandler = (event) => {
 const {name, value} = event.target;

 setName({
   ...name,
   [name]: value,
 })
}

return(
  <div>
    <input
     type="text"
     name="fistName"
     value={firstNmae}
     onChange={onChangeHandler}
    />
  </div>
)
其它你可能感兴趣的问题
上一篇React 全局错误处理程序不适用于异步 componentDidMount。尝试了 componentDidCatch 和 window.onerror 下一篇当我更改为 RTL 时，material-ui 图标不会翻转