原文链接：https://bobbyhadz.com/blog/react-get-form-input-value-on-submit

作者：Borislav Hadzhiev

注释从这开始~

总览

在React中，通过表单提交取得input的值：

  1. 在state变量中存储输出控件的值。
  2. 在form表单上设置onSubmit属性。
  3. 在handleSubmit函数中拜访输出控件的值。
import {useState} from 'react';const App = () => {  const [firstName, setFirstName] = useState('');  const [lastName, setLastName] = useState('');  const handleSubmit = event => {    console.log('handleSubmit ran');    event.preventDefault(); // ️ prevent page refresh    // ️ access input values here    console.log('firstName ️', firstName);    console.log('lastName ️', lastName);    // ️ clear all input values in the form    setFirstName('');    setLastName('');  };  return (    <div>      <form onSubmit={handleSubmit}>        <input          id="first_name"          name="first_name"          type="text"          onChange={event => setFirstName(event.target.value)}          value={firstName}        />        <input          id="last_name"          name="last_name"          type="text"          value={lastName}          onChange={event => setLastName(event.target.value)}        />        <button type="submit">Submit form</button>      </form>    </div>  );};export default App;

受控控件

咱们应用useState钩子来跟踪输出控件的值。咱们在控件上设置onChange属性，因而当控件上的值更新时，咱们更新相应的state变量。

form表单上的button元素具备submit类型，所以每当按钮被点击时，form表单上的submit事件就会被触发。

当form表单被提交时，咱们在handleSubmit函数中应用event.preventDefault() ，以此来阻止form表单页面刷新。

为了取得表单提交时的输出值，咱们只需拜访state变量。如果你想在表单提交后清空控件值，能够设置state变量为空字符串。

不受控控件

相似地，能够应用不受管制的输出控件。

  1. 在每个输出控件上设置ref属性。
  2. 在form元素上设置onSubmit属性。
  3. 在ref对象上拜访input的值，比方，ref.current.value 。
import {useRef} from 'react';const App = () => {  const firstRef = useRef(null);  const lastRef = useRef(null);  const handleSubmit = event => {    console.log('handleSubmit ran');    event.preventDefault(); // ️ prevent page refresh    // ️ access input values here    console.log('first ️', firstRef.current.value);    console.log('last ️', lastRef.current.value);    // ️ clear all input values in the form    event.target.reset();  };  return (    <div>      <form onSubmit={handleSubmit}>        <input          ref={firstRef}          id="first_name"          name="first_name"          type="text"        />        <input          ref={lastRef}          id="last_name"          name="last_name"          type="text"        />        <button type="submit">Submit form</button>      </form>    </div>  );};export default App;

上述示例应用了不受管制的输出控件。须要留神的是，输出控件没有onChange属性或者值设置。

你能够用defaultValue属性给一个不受管制的input传递一个初始值。然而，这并不是必须的，如果你不想设置初始值，你能够省略这个属性。

当应用不受管制的输出控件时，咱们应用ref来拜访input元素。useRef()钩子能够被传递一个初始值作为参数。该钩子返回一个可变的ref对象，其.current属性被初始化为传递的参数。

须要留神的是，咱们必须拜访ref对象的current属性，以取得对咱们设置ref属性的input元素的拜访。

当咱们为元素传递ref属性时，比如说，<input ref={myRef} /> ，React将ref对象的.current属性设置为相应的DOM节点。

useRef钩子创立了一个一般的JavaScript对象，但在每次渲染时都给你雷同的ref对象。换句话说，它简直是一个带有.current属性的记忆化对象值。

须要留神的是，当你扭转ref的current属性的值时，不会导致从新渲染。每当用户提交表单时，不受管制的input的值会被打印。

你不应该在一个不受管制的input（一个没有onChange处理函数的输出控件）上设置value属性，因为这将使输出控件不可变，你将无奈在其中键入。

reset

如果你想在表单提交后革除不受管制的input值，你能够应用reset()办法。

reset()办法还原表单元素的默认值。不论你的表单有多少不受管制的输出控件，只有调用reset()办法就能够革除所有的字段。

当表单被提交时，获取输出控件值的另一种办法是，应用name属性拜访表单元素。

const App = () => {  const handleSubmit = event => {    console.log('handleSubmit ran');    event.preventDefault();    // ️ access input values using name prop    console.log('first ️', event.target.first_name.value);    console.log('second ️', event.target.last_name.value);    // ️ clear all input values in the form    event.target.reset();  };  return (    <div>      <form onSubmit={handleSubmit}>        <input          id="first_name"          name="first_name"          type="text"        />        <input          id="last_name"          name="last_name"          type="text"        />        <button type="submit">Submit form</button>      </form>    </div>  );};export default App;

event对象上的target属性援用form元素。

你不会常常看到这种办法，如果你不想在state中存储输出控件的值或应用ref对象，就能够应用这种办法。这次要是一种疾速和不整洁的解决方案。

最罕用的办法是将input值存储在state变量中。从任何中央拜访state变量的能力容许高度可定制的表单。