我发现有几种方法可以处理带有钩子的用户文本输入。用钩子处理输入的更优选或更合适的方法是什么？您会使用哪个？

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

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

事件：

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

2）与上面的示例类似，但具有动态键名

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

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

事件：

onChange={handleOnChange}

3）通常，最好使用替代方法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}

4）useCallback将返回一个已记忆的回调版本，仅在其中一个依赖项已更改时才更改。

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

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

事件：

onChange={handleOnChange}