0

我已经使用 useState 方法创建了这种受控方式的版本,该方法运行良好,但是在练习和学习 useRef 时,我尝试使用 useRef 创建一个新版本。它大部分工作正常,但是当将 ref 重置为空字符串(重置表单输入字段)时,它将我的输入数据永久设置为空输入,因此返回的第一个列表项很好,但后续列表项只是空的。无论我在 App 函数中为 ref 提供空字符串值还是在 Form 组件中传递函数后,都会发生这种情况。

这是我尝试的地方:https ://codesandbox.io/s/simple-react-userlist-werrormessage-forked-useref-version-resetinputdoesntworkcorrectly-0wsze?file=/src/App.js

应用程序.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>
  );
}
4

0 回答 0