我发现有几种方法可以用钩子(Hook)处理用户的文本输入。使用钩子(Hook)处理输入的更好或更正确的方法是什么?您会使用哪一个?
1)处理输入的最简单的钩子(Hook),但是您拥有的字段越多,您必须编写的重复代码就越多。
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}
最佳答案
如何编写一个返回输入值的可重用函数......以及 <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}
</>;
关于reactjs - 使用 React hook 处理输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55757761/