时间戳

首页 > 解决方案 > 在 React 中处理表单提交的正确方法是什么？

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

问题描述

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

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

标签： reactjsforms

解决方案

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

有很多屏幕工具需要正确的 HTML 语义，例如可访问性工具，它们在正确的 HTML 下会更好地工作。

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

推荐阅读