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

Question

在React 文档和各个项目中的一堆示例中，表单提交是这样处理的：

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

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

Answer 1

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

有很多屏幕工具需要正确的 HTML 语义，例如辅助功能工具，如果使用正确的 HTML，效果会更好。

您可以轻松测试的一个示例是，使用第一个选项时，在关注输入时按 Enter 键将触发onSubmit（就像对于表单一样），而在第二个示例中则不会。