React技巧之表单提交获取input值
React技巧之表单提交获取input值
原文链接：https://bobbyhadz.com/blog/react-get-form-input-value-on-submit[1]
作者：Borislav Hadzhiev[2]
正文从这开始~
总览
在React中，通过表单提交获得input的值：
- 在
state变量中存储输入控件的值。 - 在
form表单上设置onSubmit属性。 - 在
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变量为空字符串。
不受控控件
类似地，可以使用不受控制的输入控件。
- 在每个输入控件上设置
ref属性。 - 在
form元素上设置onSubmit属性。 - 在
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变量的能力允许高度可定制的表单。
参考资料
[1]
https://bobbyhadz.com/blog/react-get-form-input-value-on-submit: https://bobbyhadz.com/blog/react-get-form-input-value-on-submit
[2]
Borislav Hadzhiev: https://bobbyhadz.com/about
腾讯云开发者
