在 React 中处理表单提交的正确方法是什么？答案

【问题标题】：Which is the correct way to handle Form submission in React?在 React 中处理表单提交的正确方法是什么？
【发布时间】：2021-11-04 02:05:23
【问题描述】：

在React documentation和各种项目中的一堆例子中，表单提交都是这样处理的：

const FormComponent = () => {
  const [val, setVal] = useState('');

  const onChange = (e) => {
    setVal(e.target.value);
  }

  const onSubmit = (e) => {
    e.preventDefault();

    console.log(val);
    // handle submit logic using "val"
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" value={val} onChange={onChange} />
      <input type="submit" value="Submit" />
    </form>
  )
}

虽然在其他地方我见过这样的代码

const FormComponent = () => {
  const [val, setVal] = useState('');

  const onChange = (e) => {
    setVal(e.target.value);
  }

  const onSubmit = () => {
    console.log(val)
    // handle submit logic using "val"
  }

  return (
    <div>
      <input type="text" value={val} onChange={onChange} />
      <button onClick={onSubmit}>Submit</button>
    </div>
  )
}

他们似乎都实现了完全相同的目标。哪种方法更好？

【问题讨论】：

您是否尝试在后一个示例中使用 Enter 键提交表单？ :)

标签： reactjs forms

【解决方案1】：

区别与 React 本身无关，而与 HTML 语义有关。第一个例子是正确的。

有很多屏幕工具需要正确的 HTML 语义，例如无障碍工具，它们与正确的 HTML 配合使用会更好。

您可以轻松测试的一个示例是，使用第一个选项，在专注于输入的同时按 Enter 将触发 onSubmit（对于表单来说应该如此），而在第二个示例中则不会。

【讨论】：

知道了..感谢您详细说明其背后的原因。

【解决方案2】：

这通常取决于您要实现的逻辑，所以我猜它主要基于意见，但更通用和正确的方法应该使用onSubmit。

    <form onSubmit={onSubmit}>
      <input type="text" value={val} onChange={onChange} />
      <input type="submit" value="Submit" />
    </form>

【讨论】：