介绍
使用 React 为 Web 应用创建用户界面轻而易举。React 为开发人员提供了灵活性，并促进了可重用性，从而最大限度地重复使用常见的 UI 元素，例如按钮、文本输入、导航等。在使用 React 进行开发时，您无需担心 DOM 更改如何发生，因为 React 会为您完成所有繁重的优化。
React 中的状态用于跟踪应用中数据随时间的变化情况，而 props 是可以在不同组件之间传递的数据。在本指南中，您将学习如何将更改镜像到 DOM 中的 JSON 对象。
在状态中存储 JSON
出于本指南的目的，请创建一个包含用户信息状态的基本组件，如下所示。用户状态是一个 JSON 对象，其属性包括姓名、年龄和薪水。
state = {
user: {
name: "John Doe",
age: 21,
salary: 2000,
},
};
在 render 方法中，使用JSON.stringify()方法显示 JSON 对象。在其下方，添加三个输入，它们将分别更改 name、age 和 salary 的值。
<div className="app">
<pre>{JSON.stringify(user, null, 2)}</pre>
<div>
<input
onChange={this.handleChange}
name="name"
placeholder="Name"
value={user.name}
/>
<input
onChange={this.handleChange}
name="age"
placeholder="Age"
value={user.age}
/>
<input
onChange={this.handleChange}
name="salary"
placeholder="Salary"
value={user.salary}
/>
</div>
</div>
现在，编写一个handleChange方法，该方法将根据输入的值更改用户状态值。确保输入的名称与用户状态中的属性名称匹配。
handleChange(e) {
this.setState({
user: {
...this.state.user,
[e.target.name]: e.target.value,
},
});
}
将以上所有代码片段放在一起，您的最终组件应如下所示。
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {
name: "John Doe",
age: 21,
salary: 2000,
},
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
user: {
...this.state.user,
[e.target.name]: e.target.value,
},
});
}
render() {
const { user } = this.state;
return (
<div className="app">
<pre>{JSON.stringify(user, null, 2)}</pre>
<div>
<input
onChange={this.handleChange}
name="name"
placeholder="Name"
value={user.name}
/>
<input
onChange={this.handleChange}
name="age"
placeholder="Age"
value={user.age}
/>
<input
onChange={this.handleChange}
name="salary"
placeholder="Salary"
value={user.salary}
/>
</div>
</div>
);
}
}
如果您检查结果，您会注意到，当您更改文本框中的值时，用户 JSON 对象也会立即改变。
在 React 中，使用输入元素的 value prop 将数据绑定到输入，从而使输入受控。受控输入从状态中获取值，并在输入中的值发生变化时触发onChange事件。组件完全控制输入的值，而输入无法直接访问组件的状态。因此，这被称为单向数据绑定。
结论
如果您刚开始使用 React，您必须了解 React 中的单向数据绑定的工作原理。如果您了解使用 props 或 context 在组件之间传递数据的各种策略，那就再好不过了。受控组件可让您的 UI 与组件状态保持同步，使其可预测且易于调试。
这就是本指南的全部内容。要了解有关 React 中数据绑定的更多信息，请查看本文。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
