React - Forms - 하위 구성 요소 업데이트를 처리하는 방법

Question

items 배열을 포함하는 state이있는 component 양식이 있습니다. item 입력 중 하나가 업데이트되면 양식의 state을 업데이트하는 데 어려움을 겪고 있습니다. 처음에는 자신 항목에 state을 만들고 다음 코드를 사용하여 값을 업데이트 한에서

: 그러나

class ItemRow extends Component{ 
    constructor(props){ 
     super(props) 
     this.state = this.props.item; 
    } 

    updateItem(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const name = target.name; 
     this.setState({ 
      [name]: value 
     }); 
    } 

    ..... 

    render(){ 
     return (
      <FormControl 
       type="text" 
       name="name" 
       value={this.state.name} 
       onChange={this.updateItem} 
      /> 
      <FormControl 
       type="text" 
       name="price" 
       value={this.state.price} 
       onChange={this.updateItem} 
      /> 

      ..... 
     ) 
    } 
} 

이것은 입력의 값을 업데이트하기위한 좋은 일을의 state는 로컬이었다 item 아니라 반사 또는 내가 form의 state을 유지하는 방법을 파악하고 item 갱신에게의 상태를 위해 노력하고있는 form

액세스

이것이 올바른 접근 방법이라고 생각하지만 어떻게 작동 시킬지 생각할 수 없습니다.

class Form extends Component{ 
    this.state = { 
     items: [ 
      { name: 'soup', price: 7, quantity: 1 } 
      { name: 'salad', price: 5, quantity: 2 } 
     ] 
    } 

    updateItem(e) { 
     // Not sure how to handle updating 
    } 

    removeItem(item) { 
     let items = this.state.items; 
     items.splice(items.indexOf(item), 1); 
     this.setState({items: items}) 
    } 

    render(){ 
     return(
      <ItemTable items={this.state.items} updateItem={this.updateItem} removeItem={this.removeItem} /> 
     ) 
    } 
} 

ItemTable :

class ItemTable extends Component { 
    removeItem(item){ 
     this.props.removeItem(item) 
    } 

    render(){ 
     let items = []; 
     this.props.items.forEach((item) => { 
      items.push(<ItemRow item={item} key={item.id} removeItem={this.removeItem.bind(this,item)} updateItem={this.props.updateItem}/>); 
     }); 
     return(
      {items} 
     ) 
    } 
} 

ItemRow :

class ItemRow extends Component { 

    removeItem(item){ 
     this.props.removeItem(item) 
    } 

    render() { 
     return (
      <FormControl 
       type="text" 
       name="name" 
       value={this.props.item.name} 
       onChange={this.updateItem} 
      /> 

      <FormControl 
       type="text" 
       name="quantity" 
       value={this.props.item.quantity} 
       onChange={this.updateItem} 
      /> 

      <FormControl 
       type="text" 
       name="price" 
       value={this.props.item.price} 
       onChange={this.updateItem} 
      /> 

      <Button bsStyle="warning" onClick={this.removeItem}><Glyphicon glyph="trash"/></Button> 
     ) 
    } 
} 

Answer 1

당신은 솔루션에 매우 가까이있어이 시점에서

나는 다음과 비슷한 있습니다. 구성 요소간에 상태를 공유해야하는 경우 상태 (예 : Form 구성 요소)를 인식해야하는 가장 상위 구성 요소에 있어야합니다. 당신은으로 물려

은 ItemTable에 양식에서 방법 "에 updateItem을"소품이 단계에서

(당신이하고있는 것처럼)을 다음 ItemRow는 ItemRow 안에 당신은 '이를 호출하여 방법을 사용할 수 있습니다 .props.updateItem '을 호출하고 필요한 경우 일부 매개 변수를 전달하여 Form에 정의 된 함수를 실행할 수 있습니다.