如何使用 React 强制发送具有多个字段的表单？答案

【问题标题】：How to imperatively send a form with multiple fields using React?如何使用 React 强制发送具有多个字段的表单？
【发布时间】：2017-01-18 19:56:23
【问题描述】：

我有一个包含多个字段的表单，我希望在单击提交按钮时更改应用程序的状态。

我尝试了使用 1 个或 4 个（表单字段数）节点的不同代码组合，但无法将 Item 添加到 item 数组（在另一个类上声明）。

我也不确定onSubmit = {this.onSubmit.bind(this)} 应该去哪里。我试过把它放在它所在的位置和最后一个输入标签中。

代码如下：

import React, {Component} from 'react';

class ItemForm extends Component{
  onSubmit(e){
    e.preventDefault();
    const node = this.refs.item //not sure if we should have 1 node or 4 nodes
    const itemName = node.value; //we need to do this for name, photo, price and donation.
    this.props.addItem(itemName);
    node.value='';
  }

  render(){
    return (
      <form onSubmit = {this.onSubmit.bind(this)} ref='item'>
        Nombre: <input
          type = "text"
        /><br/>
        Precio: <input
          type = "text"
        /><br/>
        Donación: <input
          type = "range" min = "10" max = "100" step = "10"
        /><br/>
        Foto: <input
          type = "file"
        /><br/>
        <input type="submit" value="Vender"/>
      </form>
    )
  }
}

ItemForm.propTypes={
  addItem: React.PropTypes.func.isRequired
}

export default ItemForm

【问题讨论】：

标签： reactjs react-jsx

【解决方案1】：

React 的做法是将所有输入作为受控组件。受控组件存储状态。

Nombre: <input
          type = "text"
          value={this.state.nombre}
          onChange={e => this.setState({ nombre: e.target.value })}
        />

在 onSubmit 中，选择所有这些状态值。

onSubmit() {
 // do validations.
 this.props.addItem(this.state.nombre); 
}

【讨论】：

【解决方案2】：

我认为您可以将输入的值绑定到状态，然后执行您需要的操作：

class ItemForm extends Component{

  handleNombreChange(e) {
    this.setState({ nombre: e.target.value });
  }

  onSubmit(e){
    e.preventDefault();    
    this.props.addItem(this.state.nombre);
    this.state.nombre = '';
  }

  getInitialState(){
      return { nombre: "" };
  }

  render(){
    return (
      <form onSubmit = {this.onSubmit.bind(this)}>
        Nombre: <input
          type = "text" 
          value={this.state.nombre} 
          onChange={this.handleNombreChange.bind(this)}
        /><br/>
        Precio: <input
          type = "text"
        /><br/>
        Donación: <input
          type = "range" min = "10" max = "100" step = "10"
        /><br/>
        Foto: <input
          type = "file"
        /><br/>
        <input type="submit" value="Vender"/>
      </form>
    )
  }
}

【讨论】：