使用 React 进行双向表单绑定

2020-09-18 08:00:00 · 飞浪

在本指南中，我们将了解如何将 JavaScript 对象绑定到随着输入的变化而动态变化的 HTML 表单。

介绍

JavaScript 对象通常绑定到 HTML 表单，其中每个输入元素都反映对象属性的值。双向绑定是指用户在表单中所做的每次更改都会更新表单绑定对象的属性值。在本指南中，我们将了解如何将对象绑定到随输入更改而动态更改的表单。

对象：搜索参数

假设您需要一个包含不同搜索参数的搜索表单，即：

query：表示用户查询的字符串
status：从下拉列表中获取的值，表示“PENDING”或“APPROVED”
category：从几个单选按钮中选择的搜索类别（可能的值：A / B / C）
isRegistered：用复选框表示的布尔值

将对象定义为状态

搜索参数可以表示为具有默认值的名为params的对象。此对象将在其构造函数下设置为React 组件SearchForm中的state属性。

      import React from 'react';

export default class SearchForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      params: {
        query: "",
        status: "PENDING",
        category: "A",
        isRegistered: false
      }
    }
  }
}
    

将对象映射到表单

该组件现在可以呈现一个表单，您可以将每个对象params的属性绑定到其对应元素的value属性。

文本输入

对于查询属性，您有：

      <input type="text" value={this.state.params.query} />
    

选择/下拉框

状态下拉菜单类似，因为您也将其绑定到值参数。

      <select value={this.state.params.status}>
  <option value='PENDING'>Pending</option>
  <option value='APPROVED'>Pending</option>
</select>
    

单选按钮

单选按钮的工作方式略有不同。组中的每个选项的值都是硬编码的。如果类别的当前值等于其硬编码值，则检查单选按钮。

      <input type="radio" value="A" checked={this.state.params.category === "A"}/> Category A
<input type="radio" value="B" checked={this.state.params.category === "B"}/> Category B
<input type="radio" value="C" checked={this.state.params.category === "C"}/> Category C
    

复选框

与单选按钮类似，复选框的选中状态由checked属性给出，根据来自params对象的绑定值（在本例中为isRegistered）设置为 true 或 false ：

      <input type="checkbox" checked={this.state.params.isRegistered} />
    

绑定函数

双向绑定背后的逻辑发生在附加到输入元素的事件处理程序函数中。此函数定义了获取绑定到的输入元素的值并更新组件状态的逻辑。函数的签名将传递一个事件参数，该参数包含引用输入元素的target属性。然后，我们可以通过访问其value属性从target中获取输入元素的当前值。

文本输入

查询的事件处理程序函数可能如下所示：

      handleQueryChanged(event) {
  var params    = this.state.params;  // Extract the current params object from state
  params.query  = event.target.value; // Get the value from the event's target reference

  // Update the state of the component
  this.setState({
    params: params
  });
}
    

将该函数绑定到输入元素的onChange属性，以便每次用户修改它时都会触发该函数：

      <input type="text" value={this.state.params.query} onChange={this.handleQueryChanged.bind(this)}/>
    

注意代码如何调用.bind(this)来绑定函数。目的是让this保留其值，即对组件实例的引用，从而允许函数内的逻辑始终引用组件 — 在本例中，从this调用组件的setState()方法。

选择/下拉框

对选择元素的事件处理函数执行相同操作：

      handleStatusChanged(event) {
  var params    = this.state.params;
  params.status = event.target.value;

  this.setState({
    params: params
  });
}
    

将函数绑定到输入元素：

      <select value={this.state.params.status} onChange={this.handleStatusChanged.bind(this)}>
  <option value='PENDING'>Pending</option>
  <option value='APPROVED'>Pending</option>
</select>
    

单选按钮

该类别的所有三个单选按钮都具有相同的事件处理程序函数：

      handleCategoryChanged(event) {
  var params      = this.state.params;
  params.category = event.target.value;

  this.setState({
    params: params
  });
}
    

将函数相应地绑定到每个元素：

      <input type="radio" value="A" checked={this.state.params.category === "A"} onChange={this.handleCategoryChanged.bind(this)}/> Category A
<input type="radio" value="B" checked={this.state.params.category === "B"} onChange={this.handleCategoryChanged.bind(this)}/> Category B
<input type="radio" value="C" checked={this.state.params.category === "C"} onChange={this.handleCategoryChanged.bind(this)}/> Category C
    

复选框

复选框的事件处理程序也类似。

      handleIsRegisteredChanged(event) {
  var params          = this.state.params;
  params.isRegistered = event.target.value;

  this.setState({
    params: params
  });
}
    

将其连接到输入元素遵循相同的模式。

      <input type="checkbox" checked={this.state.params.isRegistered} onChange={this.handleIsRegisteredChanged.<span class="hljs-title f

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 React 进行双向表单绑定

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; export default class SearchForm extends React.Component { constructor(props) { super(props); this.state = { params: { query: "", status: "PENDING", category: "A", isRegistered: false } } } }

<input type="radio" value="A" checked={this.state.params.category === "A"}/> Category A <input type="radio" value="B" checked={this.state.params.category === "B"}/> Category B <input type="radio" value="C" checked={this.state.params.category === "C"}/> Category C

handleQueryChanged(event) { var params = this.state.params; // Extract the current params object from state params.query = event.target.value; // Get the value from the event's target reference // Update the state of the component this.setState({ params: params }); }

<input type="radio" value="A" checked={this.state.params.category === "A"} onChange={this.handleCategoryChanged.bind(this)}/> Category A <input type="radio" value="B" checked={this.state.params.category === "B"} onChange={this.handleCategoryChanged.bind(this)}/> Category B <input type="radio" value="C" checked={this.state.params.category === "C"} onChange={this.handleCategoryChanged.bind(this)}/> Category C