使用 React.js 从表单中提取输入

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

React.js 允许您定义一个其属性与表单的输入元素绑定的对象，从而可以轻松地从 HTML 输入中检索值。

介绍

从表单中的 HTML 输入元素中检索值是 JavaScript 中最基本的任务之一。React.js 允许您定义一个对象，该对象的属性与表单的输入元素绑定，从而使此操作变得简单。这样，对输入元素值的更新将自动更新绑定到的对象属性的值。

将对象绑定到表单

假设您有一个表单，想要表示有关单个客户的信息，即客户的名字、姓氏和状态。这些属性中的每一个都应该绑定到其自己的相应 HTML 输入元素。当用户修改输入元素的值时，对象的值也应该反映出这种变化。

将客户对象定义为状态

首先，您需要将客户对象定义为组件状态的一部分。您可以在初始化组件的状态对象时将其放入 React 组件的构造函数中。在本例中，您将放入一个名为customer的属性，其值是一个包含客户名字、姓氏和状态的对象。

      import React from 'react';

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

    this.state = {
      customer: {
        firstName: props.firstName,
        lastName: props.lastName,
        status: props.status
      }
    }
  }
}
    

请注意， state中customer对象的firstName、lastName和status的默认值是从组件构造函数的props中提取的。这将允许调用此CustomerForm组件的另一个组件传递一些默认值。props 中具有初始值的一个例子是，如果此CustomerForm使用从 AJAX 例程的数据库中提取的值来呈现以更新客户信息。

将状态值绑定到输入元素

现在您已将 customer 对象作为 state 的一部分，请使用 JSX 将对象的值绑定到HTML 输入元素的value属性。这可以在组件的render()方法中找到：

      import React from 'react';

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

    this.state = {
      customer: {
        firstName: props.firstName,
        lastName: props.lastName,
        status: props.status
      }
    }
  }

  render() {
    return (
      <div>
        <label>
          First Name: 
        </label>
        <input type="text" value={this.state.customer.firstName}/>
        <br/>
        <label>
          Last Name:
        </label>
        <input type="text" value={this.state.customer.lastName}/>
        <br/>
        <label>
          Status:
        </label>
        <select value={this.state.customer.status}>
          <option value="PENDING">
            Pending
          </option>
          <option value="APPROVED">
            Approved
          </option>
        </select>
      </div>
    );
  }
}
    

更新客户对象

应为输入元素的onChange属性提供一个事件处理程序函数。此函数的签名将接受单个参数，该参数是一个对象，其中包含表示输入元素本身的名为target 的引用。然后，该函数的逻辑可以获取输入元素的值并更新状态的值（在本例中为组件状态内的客户对象的属性）。

事件处理函数示例

假设您想要一个函数来更新客户的名字。事件处理函数将接受一个名为event的对象，提取event.target所表示的输入元素的值，并更新customer对象，然后使用修改后的客户对象更新组件的状态。

      handleFirstNameChanged(event) {
  // Extract the current value of the customer from state
  var customer = this.state.customer;

  // Extract the value of the input element represented by `target`
  var modifiedValue = event.target.value;

  // Update the customer object's first name
  customer.firstName = modifiedValue;

  // Update the state object
  this.setState({
    customer: customer
  });
}
    

将事件处理函数绑定到输入元素

上述函数需要绑定到与客户名字相关的输入元素。在 JSX 中，您可以有以下内容：

      <label>
  First Name:
</label>
<input type="text" onChange={this.handleFirstNameChanged.bind(this)} />
    

绑定此

请注意，您必须对输入元素调用.bind(this) 。这将确保当前引用组件实例的this在函数handleFirstNamechanged中保持不变。由于setState是 React 组件的方法，因此函数中的this应始终引用 React 组件的实例。

提取更新后的对象

要检查客户对象的最新值，请添加一个按钮，单击后会将该对象简单地记录到控制台。在实际应用中，您可以在此处获取对象并应用进一步处理，例如将其提交到 API 端点。

按钮单击事件处理函数

我们的组件将具有以下用于单击按钮的事件处理函数：

      handleButtonClicked() {
  console.log(this.state.customer);
}
    

将功能绑定到按钮

在 JSX 中，您可能有以下 HTML 代码片段并将事件处理程序函数绑定在其onClick属性之上：

      <button onClick={this.handleButtonClicked.bind(this}>
  Save Customer
</button>
    

最终代码

CustomerForm组件更新客户对象所有属性的最终代码将如下所示：

      import React from 'react';

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

    this.state = {
      customer: {
        firstName: props.firstName,
        lastName: props.lastName,
        status: props.status
      }
    }
  }

  handleFirstNameChanged(event) {
    var customer        = this.state.customer;
    customer.firstName  = event.target.value;

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

  handleLastNameChanged(event) {
    var customer      = this.state.customer;
    customer.lastName = event.target.value;

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

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

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

  handleButtonClicked() {
    console.log(this.state.customer);
  }

  render() {
    return (
      <div>
        <label>
          First Name: 
        </label>
        <input type="text" value={this.state.customer.firstName} onChange={this.handleFirstNameChanged.bind(this)}/>
        <br/>
        <label>
          Last Name:
        </label>
        <input type="text" value={this.state.customer.lastName} onChange={this.handleLastNameChanged.bind(this)}/>
        <br/>
        <label>
          Status:
        </label>
        <select value={this.state.customer.status} onChange={this.handleStatusChanged.bind(this)}>
          <option value="PENDING">
            Pending
          </option>
          <option value="APPROVED">
            Approved
          </option>
        </select>
        <hr/>
        <button onClick={this.handleButtonClicked.bind(this)}>
          Save Record
        </button>
      </div>
    );
  }
}
    

结论

在 React.js 中将对象绑定到表单涉及三个简单的步骤：

在组件的状态内定义对象及其属性。
将对象的属性值绑定到其对应的 HTML 输入元素的value属性。
为输入元素的onChange属性绑定一个事件处理函数，该函数引用元素本身，其底层逻辑涉及更新组件的状态。

现在您已经获得了当用户修改表单的输入元素时自动更新的对象的引用，您可以将其传递给应用程序的下一个逻辑步骤，例如将其提交到 API 端点。

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

_查看原文

技术指南

阅读全文

使用 React.js 从表单中提取输入

杭州电子商务研究院

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

import React from 'react'; export default class CustomerForm extends React.Component { constructor(props) { super(props); this.state = { customer: { firstName: props.firstName, lastName: props.lastName, status: props.status } } } }

import React from 'react'; export default class CustomerForm extends React.Component { constructor(props) { super(props); this.state = { customer: { firstName: props.firstName, lastName: props.lastName, status: props.status } } } render() { return ( <div> <label> First Name: </label> <input type="text" value={this.state.customer.firstName}/> <br/> <label> Last Name: </label> <input type="text" value={this.state.customer.lastName}/> <br/> <label> Status: </label> <select value={this.state.customer.status}> <option value="PENDING"> Pending </option> <option value="APPROVED"> Approved </option> </select> </div> ); } }

handleFirstNameChanged(event) { // Extract the current value of the customer from state var customer = this.state.customer; // Extract the value of the input element represented by `target` var modifiedValue = event.target.value; // Update the customer object's first name customer.firstName = modifiedValue; // Update the state object this.setState({ customer: customer }); }

import React from 'react'; export default class CustomerForm extends React.Component { constructor(props) { super(props); this.state = { customer: { firstName: props.firstName, lastName: props.lastName, status: props.status } } } handleFirstNameChanged(event) { var customer = this.state.customer; customer.firstName = event.target.value; this.setState({ customer: customer }); } handleLastNameChanged(event) { var customer = this.state.customer; customer.lastName = event.target.value; this.setState({ customer: customer }); } handleStatusChanged(event) { var customer = this.state.customer; customer.status = event.target.value; this.setState({ customer: customer }); } handleButtonClicked() { console.log(this.state.customer); } render() { return ( <div> <label> First Name: </label> <input type="text" value={this.state.customer.firstName} onChange={this.handleFirstNameChanged.bind(this)}/> <br/> <label> Last Name: </label> <input type="text" value={this.state.customer.lastName} onChange={this.handleLastNameChanged.bind(this)}/> <br/> <label> Status: </label> <select value={this.state.customer.status} onChange={this.handleStatusChanged.bind(this)}> <option value="PENDING"> Pending </option> <option value="APPROVED"> Approved </option> </select> <hr/> <button onClick={this.handleButtonClicked.bind(this)}> Save Record </button> </div> ); } }