React技巧之表单提交获取input值
<p>正文从这开始~</p><h2 id="总览">总览</h2>
<p>在React中，通过表单提交获得<code>input</code>的值：</p>
<ol>
<li>在<code>state</code>变量中存储输入控件的值。</li>
<li>在<code>form</code>表单上设置<code>onSubmit</code>属性。</li>
<li>在<code>handleSubmit</code>函数中访问输入控件的值。</li>
</ol>
<pre><code class="language-jsx">import {useState} from 'react';
const App = () => {
const = useState('');
const = 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;
</code></pre>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a2ab5fba258419c80517980d905360b~tplv-k3u1fbpfcp-watermark.image?"></p>
<h2 id="受控控件">受控控件</h2>
<p>我们使用<code>useState</code>钩子来跟踪输入控件的值。我们在控件上设置<code>onChange</code>属性，因此当控件上的值更新时，我们更新相应的<code>state</code>变量。</p>
<p><code>form</code>表单上的<code>button</code>元素具有<code>submit</code>类型，所以每当按钮被点击时，<code>form</code>表单上的<code>submit</code>事件就会被触发。</p>
<blockquote>
<p>当<code>form</code>表单被提交时，我们在<code>handleSubmit</code>函数中使用<code>event.preventDefault()</code> ，以此来阻止<code>form</code>表单页面刷新。</p>
</blockquote>
<p>为了获得表单提交时的输入值，我们只需访问<code>state</code>变量。如果你想在表单提交后清空控件值，可以设置<code>state</code>变量为空字符串。</p>
<h2 id="不受控控件">不受控控件</h2>
<p>类似地，可以使用不受控制的输入控件。</p>
<ol>
<li>在每个输入控件上设置<code>ref</code>属性。</li>
<li>在<code>form</code>元素上设置<code>onSubmit</code>属性。</li>
<li>在<code>ref</code>对象上访问<code>input</code>的值，比如，<code>ref.current.value</code> 。</li>
</ol>
<pre><code class="language-jsx">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;
</code></pre>
<p>上述示例使用了不受控制的输入控件。需要注意的是，输入控件没有<code>onChange</code>属性或者值设置。</p>
<blockquote>
<p>你可以用<code>defaultValue</code>属性给一个不受控制的<code>input</code>传递一个初始值。然而，这并不是必须的，如果你不想设置初始值，你可以省略这个属性。</p>
</blockquote>
<p>当使用不受控制的输入控件时，我们使用<code>ref</code>来访问<code>input</code>元素。<code>useRef()</code>钩子可以被传递一个初始值作为参数。该钩子返回一个可变的<code>ref</code>对象，其<code>.current</code>属性被初始化为传递的参数。</p>
<blockquote>
<p>需要注意的是，我们必须访问<code>ref</code>对象的<code>current</code>属性，以获得对我们设置<code>ref</code>属性的<code>input</code>元素的访问。</p>
</blockquote>
<p>当我们为元素传递<code>ref</code>属性时，比如说，<code><input ref={myRef} /></code> ，React将<code>ref</code>对象的<code>.current</code>属性设置为相应的DOM节点。</p>
<blockquote>
<p><code>useRef</code>钩子创建了一个普通的JavaScript对象，但在每次渲染时都给你相同的<code>ref</code>对象。换句话说，它几乎是一个带有<code>.current</code>属性的记忆化对象值。</p>
</blockquote>
<p>需要注意的是，当你改变<code>ref</code>的<code>current</code>属性的值时，不会导致重新渲染。每当用户提交表单时，不受控制的<code>input</code>的值会被打印。</p>
<p>你不应该在一个不受控制的<code>input</code>（一个没有<code>onChange</code>处理函数的输入控件）上设置<code>value</code>属性，因为这将使输入控件不可变，你将无法在其中键入。</p>
<h3 id="reset">reset</h3>
<blockquote>
<p>如果你想在表单提交后清除不受控制的<code>input</code>值，你可以使用<code>reset()</code>方法。</p>
</blockquote>
<p><code>reset()</code>方法还原表单元素的默认值。不管你的表单有多少不受控制的输入控件，只要调用<code>reset()</code>方法就可以清除所有的字段。</p>
<p>当表单被提交时，获取输入控件值的另一种方法是，使用<code>name</code>属性访问表单元素。</p>
<pre><code class="language-jsx">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;
</code></pre>
<p><code>event</code>对象上的<code>target</code>属性引用<code>form</code>元素。</p>
<blockquote>
<p>你不会经常看到这种方法，如果你不想在<code>state</code>中存储输入控件的值或使用<code>ref</code>对象，就可以使用这种方法。这主要是一种快速和不整洁的解决方案。</p>
</blockquote>
<p>最常用的方法是将<code>input</code>值存储在<code>state</code>变量中。从任何地方访问<code>state</code>变量的能力允许高度可定制的表单。</p><br><br>
来源：https://www.cnblogs.com/chuckQu/p/16425148.html
頁:
[1]