Wie senden Sie ein Formular mit mehreren Feldern zwingend mit React?

Question

Ich habe ein Formular mit mehreren Feldern und ich möchte den Status der Anwendung ändern, wenn auf eine Schaltfläche zum Senden geklickt wird.

Ich habe verschiedene Kombinationen von Code mit 1 oder 4 (Anzahl der Formularfelder) Knoten ausprobiert, aber war nicht in der Lage, das Element zum Elementarray hinzuzufügen (für eine andere Klasse deklariert).

Ich bin mir auch nicht genau sicher, wo onSubmit = {this.onSubmit.bind(this)} gehen sollte. Ich habe versucht, es dort zu platzieren, wo es ist und im letzten Eingabe-Tag.

Hier ist der Code:

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

Die reagieren Art und Weise zu tun, es ist alles so gesteuerten Komponenten die Eingaben machen. Der Status der kontrollierten Komponentenspeicherung.

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

Wählen Sie in onSubmit alle diese Statuswerte aus.

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

Answer 2

Ich glaube, Sie die Werte Eingänge binden könnten an den Staat und dann tun, was Sie brauchen:

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