Question

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

我尝试使用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

Answer 1

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

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>
    )
  }
}

Answer 2

这样做的反应方式是将所有输入作为受控组件。受控组件存储状态。

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); 
}

如何使用React命令性地发送包含多个字段的表单？

2 个答案: