React技巧之表单提交获取input值

正文从这开始~

总览

在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;

get-form-input-value-on-submit.gif

受控控件

我们使用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属性的记忆化对象值。

需要注意的是,当你改变refcurrent属性的值时,不会导致重新渲染。每当用户提交表单时,不受控制的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变量的能力允许高度可定制的表单。

posted @ 2022-06-29 22:20  chuckQu  阅读(1219)  评论(0编辑  收藏  举报