我已经使用 useState 方法创建了这种受控方式的版本,该方法运行良好,但是在练习和学习 useRef 时,我尝试使用 useRef 创建一个新版本。它大部分工作正常,但是当将 ref 重置为空字符串(重置表单输入字段)时,它将我的输入数据永久设置为空输入,因此返回的第一个列表项很好,但后续列表项只是空的。无论我在 App 函数中为 ref 提供空字符串值还是在 Form 组件中传递函数后,都会发生这种情况。
应用程序.jsx:
function handleAdd(nameInputRef, ageInputRef) {
const [userList, setUserList] = useState([]);
//...
setUserList((prevValue) => {
return [
...prevValue,
{
name: nameInputRef.current.value,
age: ageInputRef.current.value
}
];
});
ageInputRef.current.value = ""; `<-------**reset input ref**`
nameInputRef.current.value = ""; `<-------**reset input ref**`
}
<Form addUser={handleAdd} />
{userList.map((user, index) => {
return (
<List
key={index}
id={index}
userName={user.name}
userAge={user.age}
value={user}
/>
);
})}
表单.jsx:
export default function Form(props) {
const nameInputRef = useRef();
const ageInputRef = useRef();
return (
<form
onSubmit={(e) => {
props.addUser(nameInputRef, ageInputRef);
e.preventDefault();
}}
>
<label htmlFor="">Username: </label>
<input id="name-id" ref={nameInputRef} name="username" type="text" />
<br />
<br />
<label htmlFor="">Age: </label>
<input id="age-id" ref={ageInputRef} name="age" type="text" />
<br />
<br />
<button type="submit">Add User</button>
</form>
);
}