reactjs 用法:提交表单中的useState或useRef

xeufq47z  于 2023-04-29  发布在  React
关注(0)|答案(2)|浏览(182)

通常,当我处理表单提交时,我使用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写的

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>
  );

我想弄清楚到底有什么区别,哪一种在总体性能上更好?

72qzrwbm

72qzrwbm1#

有赞成也有反对。以下是一些:

  • 如果您将表单值保持在 state(即受控组件)中,一个好处是您可以在值更改时立即访问值,例如,如果您希望禁用某些按钮,以防用户在输入框中键入内容。
  • 如果你采用ref方法(也就是不受控制的组件),一个好处是你不必在每次用户输入时重新呈现你的组件(因为你没有改变状态)。

AFAIK react建议使用受控组件,但非受控组件也是一种替代方案。

gzszwxb4

gzszwxb42#

根据目的,如果使用useState,则会同时获得gettersetter(这会触发rerender立即更新值),而如果使用useRef,则只能获得getter
因此,如果使用useRef,则不需要设置value={state},而useState需要设置。
一般来说,如果你想验证用户输入的值(例如例如,使用onChange事件),你必须使用useState,如果你只想在提交表单时获得值,你可以自由使用useRef。

相关问题