关于react.js:React技巧之表单提交获取input值

原文链接：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 变量的能力容许高度可定制的表单。