React?를 사용하여 여러 필드가있는 양식을 명령형으로 보내는 방법은 무엇입니까?

Question

필드가 여러 개인 양식이 있는데 제출 단추를 클릭하면 응용 프로그램의 상태가 변경되기를 원합니다.

1 또는 4 (양식 필드 수) 노드를 사용하여 다른 코드 조합을 시도했지만 항목 배열 (다른 클래스에 선언 됨)에 항목을 추가 할 수 없었습니다.

나는 또한 정확히 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

(가)는 제어 요소로 모든 입력을 할 것입니다 수행하는 방식으로 반응한다. 제어되는 구성 요소 저장소 상태입니다.

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

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