使用 React 钩子处理输入

Question

我发现有几种方法可以用钩子处理用户的文本输入。用钩子处理输入的更可取或正确的方法是什么？你会用哪个？

1）处理输入的最简单的钩子，但是你有更多的字段，你必须编写更多的重复代码。

 const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

事件：

 onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}

1. 与上面的示例类似，但使用动态键名

const [inputValues, setInputValues] = useState({
  username: '', password: ''
});

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
};

事件：

 onChange={handleOnChange}

1. useState 的替代方案，正如 ReactJS 文档所述， useReducer 通常比 useState 更可取。

 const [inputValues, setInputValues] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  {username: '', password: ''}
);

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ [name]: value });
};

事件：

 onChange={handleOnChange}

1. useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。

 const [inputValues, setInputValues] = useState({
  username: '', password: ''
});

const handleOnChange = useCallback(event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
});

事件：

 onChange={handleOnChange}

原文由 ligowsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如何编写一个返回输入值的可重用函数……以及 <input> 本身：

  function useInput({ type /*...*/ }) {
   const [value, setValue] = useState("");
   const input = <input value={value} onChange={e => setValue(e.target.value)} type={type} />;
   return [value, input];
 }

然后可以用作：

  const [username, userInput] = useInput({ type: "text" });
 const [password, passwordInput] = useInput({ type: "text" });

 return <>
   {userInput} -> {username} <br />
   {passwordInput} -> {password}
 </>;

原文由 Jonas Wilms 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这就是我现在使用的方式：

 const [inputValue, setInputValue] = React.useState("");

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

<input
   type="text"
   name="name"
   onChange={onChangeHandler}
   value={inputValue}
/>

原文由 ncesar 发布，翻译遵循 CC BY-SA 4.0 许可协议