今天我在練習 React，發現了兩種在提交表單時獲取輸入值的方法。
第一： 使用鉤子，例如：
...
const [name, setName] = useState('');
...
return <input onChange={(value) => setName(value)} value={name} />
第二： 通過event.target.children[i].value獲取，例如：
const handleSubmit = (event: BaseSyntheticEvent) => {
event.preventDefault();
const formInputs = event.target.children;
for (const input in formInputs) {
console.log(formInputs[input].value);
}
};
問題是，我應該使用哪一個，為什么？它是可選的，還是我不知道，它確實對性能有一些影響。
uj5u.com熱心網友回復：
在可以避免的情況下，不要在 React 中使用 vanilla DOM 操作，這是合理的。在大多數情況下，第一種方法要好得多。
- 使用 DOM 很慢。狀態和虛擬 DOM 有很大幫助。
- 在 React 范式中，應用程式的外觀和功能應該盡可能地源于狀態。考慮到重新渲染的作業方式并且應該避免，無狀態的副作用會使事情變得難以推理和難以處理。
如果您傾向于使用第二種方法的原因是您有大量輸入并且為每個輸入單獨創建一個狀態很乏味，那么一種選擇是將狀態改為單個物件（或 Map）。
const MyInput = ({ name, state, onChange }) => (
<Input name={name} onChange={onChange} value={state[name]} />
);
const onChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value });
};
<MyInput name="name" state={state} onChange={onChange}/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/459676.html
標籤：javascript 反应
下一篇：從物件陣列中獲取學生的出現