useState 或 useRef 用于表单提交

Question

通常，当我处理表单提交时，我使用

useState

作为输入值并将

onChange

事件设置为

const [inputValues, setInputValues] = useState({
    title: "",
    address: "init"
  });

  function submitHandler(e) {
    e.preventDefault();

    const meetupData = {
      meetupTitle: inputValues.title,
    };

    console.log(meetupData);
  }
  return (
    <form onSubmit={submitHandler}>
      <div>
        <label htmlFor="title">Meetup Title</label>
        <input
          type="text"
          required
          id="title"
          value={inputValues.title}
          onChange={(e) =>
            setInputValues({ ...inputValues, title: e.target.value })
          }
        />
      </div>
      <div>
        <button>Add Meetup</button>
      </div>
    </form>
  );

但在一些教程中我发现它是用

useRef

as

编写的

const titleInputRef = useRef();

  function submitHandler(e) {
    e.preventDefault();
    const enteredTitle = titleInputRef.current.value;

    const meetupData = {
      title: enteredTitle,
    };

    console.log(meetupData);
  }
  return (
    <form onSubmit={submitHandler}>
      <div>
        <label htmlFor="title">Meetup Title</label>
        <input type="text" required id="title" ref={titleInputRef} />
      </div>
      <div>
        <button>Add Meetup</button>
      </div>
    </form>
  );

我想了解有什么区别以及哪一个在总体性能上可能更好？

Answer 1

您可以使用基于状态的方法（又名受控组件）或基于引用的方法（又名不受控组件）。

受控组件

以下是（旧）React 文档的一些引用：

对于受控组件，输入值始终由 反应状态。虽然这意味着您必须输入更多代码，但您 现在也可以将该值传递给其他 UI 元素，或者从 其他事件处理程序。

其他示例包括您可以根据其他输入的值轻松禁用一个表单元素。

此外，由于值存储在状态中，这意味着更改表单元素的值将导致组件重新渲染。

不受控制的组件

这里引用了（旧）React 文档中关于不受控制组件的内容：

使用受控组件有时可能很乏味，因为您 需要为数据可以更改的每种方式编写一个事件处理程序 通过 React 组件传输所有输入状态。这可以成为 当您转换预先存在的代码库时特别烦人 React，或将 React 应用程序与非 React 库集成。 在这些情况下，您可能需要检查不受控制的情况 组件，一种实现输入表单的替代技术。

Answer 2

按照目的，如果您使用 useState，您会同时获得

getter

和

setter

（这会触发重新渲染以立即更新值），而如果您使用 useRef，您只会获得

getter

。

因此，如果使用useRef，则不需要设置

value={state}

，而useState则需要设置。

一般来说，如果你想验证用户输入的值（例如使用onChange事件），你必须使用

useState

，如果你只想在提交表单时获取值，你可以随意使用useRef。