メソッドを使用して子要素を反復処理するモーダルで反応する

Question

したがって、テーブルに動的なテーブル行数のモダルがあります。ユーザーはテーブル行を更新できます（一部の情報を編集できます）。保存ボタンをクリックして、各行を繰り返し処理し、その新しい情報をデータベースに保存するメソッドを呼び出すことができます。モーダルのコードは以下の通りです...更新された情報を保存するために各項目を反復処理する方法はありますか？あなたが更新に来たとき、あなたがいずれかの操作を実行する必要はありません、テーブル行のそれぞれに入力されたものと一致this.state.charitiesの状態を維持する必要が

updateCharities() { 
} 

render() { 
return (
    <Modal className="charityModal" show={this.props.show} onHide={this.props.onHide}> 
    <Modal.Header closeButton> 
     <Modal.Title>Update Your Charity Selections</Modal.Title> 
    </Modal.Header> 

    <Modal.Body> 
     <Table> 
     <thead> 
      <tr> 
      <th>Charity Name</th> 
      <th>Total Donations</th> 
      <th>Current Percentage Donation</th> 
      <th>Remove Charity</th> 
      </tr> 
     </thead> 

     <tbody> 
      {this.state.charities.map((charity, i) => 
      // {console.log('charity', charity.percentage)} 
      <CharityModalEntry key={i} charity={charity} /> 
     )} 
     </tbody> 
     </Table> 

    </Modal.Body> 

    <Modal.Footer> 
     <Button bsStyle="primary" onClick={this.updateCharities}>Save</Button> 
     <Button>Cancel</Button> 
    </Modal.Footer> 
    </Modal> 
); 

}

Answer 1

あなたは親の状態で利用可能な関連データを持っているので、繰り返します。親の状態を更新する各CharityModalEntryにコールバック関数を渡すことで、これを行うことができます。親で例えば

、：

親でも

rowUpdated(i, newCharityData) { 
    const charitiesSlice= this.state.charities.slice(); 
    charitiesSlice[i] = newCharityData; 
    this.setState({ 
     charities: charitiesSlice 
    }); 
} 

、あなたがレンダリングCharityModalEntry：

constructor() { 
    this.state = { 
     charity: this.props.charity 
    } 
    //NB: You may want to implement componentWillReceiveProps() as well. 
} 

updateName(event) { 
    const charitySlice = this.state.charity.slice(); 
    charitySlice.name = event.target.value; 
    this.setState({ 
     charity: charitySlice 
    }); 
    this.props.onUpdate(this.state.charity); 
} 

render() { 
    return (
     <input 
      id="charityName" 
      onBlur={e => this.updateName(e)} 
      value={this.state.charity.name} 
     /> 
    ); 
} 

：CharityModalEntryコンポーネントで次に

<tbody> 
    {this.state.charities.map((charity, i) => 
     <CharityModalEntry 
      key={i} 
      charity={charity} 
      onUpdate={newData => rowUpdated(i, newData)} 
     /> 
    )} 
</tbody> 

（例としてcharityNameを使用して）