如何使用 React 设置输入的值
介绍
React 应用有一个表单元素，它与 HTML 表单略有不同，因为它会保留值的内部状态。本指南将介绍两种设置输入元素值的不同方法。
控制输入法
React 中的表单控件与标准 HTML 表单控件略有不同，因为 React 表单中的每个输入元素都在后台管理内部状态。
使用受控表单输入方法，您可以将状态值作为各种表单控件的输入来维护。
为此，您需要维持这样的状态：
this.state = {
key1: "value1",
key2: "value2",
key3: "value3",
};
请注意，您可以根据功能需求修改其默认/初始值。
下一个示例展示了如何使用受控输入方法。
import React, { Component } from "react";
class SimpleForm extends Component {
constructor() {
super();
this.state = {
};
this.onInputchange = this.onInputchange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onInputchange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
onSubmitForm() {
console.log(this.state)
}
render() {
const { items } = this.state;
return (
<div>
<div>
<label>
First Name :
<input
name="fname"
type="text"
value={this.state.fname}
onChange={this.onInputchange}
/>
</label>
</div>
<div>
<label>
Last Name :
<input
name="lname"
type="text"
value={this.state.lname}
onChange={this.onInputchange}
/>
</label>
</div>
<div>
<label>
Email :
<input
name="email"
type="text"
value={this.state.email}
onChange={this.onInputchange}
/>
</label>
</div>
<div>
<button onClick={this.onSubmitForm}>Submit</button>
</div>
</div>
);
}
}
export default SimpleForm;
在上面的源代码中，你有一个表单，其中包含三个不同的控件，分别称为first name、last name和email。每个表单控件都附加了一个名为this.onInputChange()的公共事件。
onInputchange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
从表单控件获取值后，它会根据键的名称存储值，如下所示：
event.target.name]: event.target.value;
i.e. fname : value
用户对初始值或空值所做的任何修改都会反映在组件的状态对象中。
提交表单后，状态对象应如下所示：
{
email: "test@test.com"
fname: "Test first name"
lname: "Test last name"
}
这就是您可以如何利用受控表单输入，它管理每个元素的事件并将值存储到组件的状态对象中。
不受控制的输入方法
现在您已经了解了处理表单输入的主要方法，您可以尝试另一种称为不受控制的方法，它使用 DOM 本身来管理表单数据。
非受控组件方法与受控方法相反，您可以使用ref访问表单控制值。
Ref是访问在render()部分内创建的不同 DOM 元素的方法。
以下是使用ref的简单语法。
class TestComponent extends Component {
constructor(props) {
super(props);
// Declaring refs
this.myRef = React.createRef();
}
render() {
return <element ref={this.myRef} />;
}
}
在示例中，请注意只有一条语句声明了ref。
this.myRef = React.createRef();
声明ref之后，就可以像这样访问它：
<element ref={this.myRef} />
请参阅下面完整的工作示例。
import React, { Component } from "react";
class RefExample extends Component {
constructor() {
super();
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onSubmitForm() {
console.log(this.input.value);
}
render() {
return (
<div>
<div>
<label>
First Name :
<input
name="fname"
type="text"
ref={myinput => (this.input = myinput)}
/>
</label>
</div>
<div>
<button onClick={this.onSubmitForm}>Submit</button>
</div>
</div>
);
}
}
export default RefExample;
在上面的例子中，有一种控件形式可以接受用户的名字。在这种方法中，附加的 props 是这样添加的：
ref={myinput => (this.input = myinput)}
这意味着引用被分配给表单控件，以便稍后需要时可以访问其值。
onSubmitForm() {
console.log(this.input.value);
}
它与受控组件方法不同；因此，不受控组件方法并不合适，因为它将真相来源保留在 DOM 本身内。
您还可以使用ref值来操纵输入及其行为，例如，通过聚焦下面显示的输入控制。
onSubmitForm() {
console.log(this.input.focus());
}
在上面的源代码中，ref值与聚焦于输入元素的函数focus()一起使用。
当您不想做太多工作并想快速创建表单时，就可以利用这种不受控制的方法。
结论
受控方法和不受控方法是使用表单元素在 React 应用中操纵表单值的不同方法。处理表单时不必使用任何特定方法；这取决于您想要如何构建应用。
现在，您可以尝试这两种方法，并做出明智的决定，选择最适合您的方法。我希望本指南能帮助您开始使用 React 中的表单。
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~