コンポーネント間の複数のやり取りを管理する方法を教えてください

Question

私は苦労して少し失われ、1つのことについて反応します。

私は5列の行を持っています。

各列には、チェックボックス、入力、ボタンがあります。

ですから、標準的な方法でそれを見れば、それは次のようになります。

render() { 
    return (
     <div className="sbm-sources"> 
     <div className="col-md-2 sbm-source"> 
      <input type="checkbox" name="c1"/>Add to source. 
      <br /> 
      <input type="text" name="i1" size="10" onClick={this.expandInput} placeholder="Enter you query." /> 
     </div> 
     <div className="col-md-2 sbm-source"> 
      <input type="checkbox" name="c2"/>Add source to blipp. 
      <br /> 
      <input type="text" name="i2" size="10" onClick={this.expandInput} placeholder="Enter you query." /> 
      </button> 
     </div> 
     <div className="col-md-2 sbm-source"> 
      <input type="checkbox" name="c3" />Add source to blipp. 
      <br /> 
      <input type="text" name="i3" size="10" onClick={this.expandInput} placeholder="Enter you query." /> 
      </button> 
     </div> 
     <div className="col-md-2 sbm-source"> 
      <input type="checkbox" name="c4" />Add source to blipp. 
      <br /> 
      <input type="text" name="i4" size="10" onClick={this.expandInput} placeholder="Enter you query." /> 
     </div> 
     <div className="col-md-2 sbm-source"> 
      <input type="checkbox" name='c5' />Add source to blipp. 
      <br /> 
      <input type="text" name="i5" size="10" onClick={this.expandInput} placeholder="Enter you query." /> 
     </div> 
     </div> 
    ); 
    } 
}; 

事があり、各列が個別に検証することができますが、私は、トリガーとなる1知っている必要があります。

私はそれぞれの名前を使用してそれを行う方法を知っていますが、各入力/チェックボックスの状態を作成し、次にPOST要求を送信する前にデータを関連付けるためにここで最高のオプションです。

例：

handleChecked(e){ 
    if (e.value.name === c1){ 
    this.setState({checkedC1: true}); 
    } 

    ... 
} 

これはすぐに厄介と維持するために、または適応させることは困難になります。

私の投稿要求をしたいときは、intを受け取ることが大好きです。たとえば、入力されたチェックボックス（および/または）の入力が最初の列からのものである場合、受信されたintは0になります。

反応するとエレガントな方法がありますか？何をお勧めしますか？ 私は自分のコードにあまりにも多く、私の経験の欠如は私にそれについて盲目にさせます。

多くの感謝！維持するために

Answer 1

あなたはからのため、親コンポーネント内のすべての列の状態を維持する必要がありますそこにあなたの投稿要求が送信されます。

• アレイに
• オプションの各項目の列を列データの配列を作成し、
• 内部状態に配列を置いレンダリング、アレイ上のループに.map()を使用してレンダリング：カラムを置きます独立した（ステートレスな）コンポーネントの内部にあります。

  // as part of your constructor 
  let initialColumns = [ 
      { checked: false, checkText: "Add to source.", inputPh="Enter your query.", value: ""}, 
      ... 
      { checked: false, checkText: "Add source to blipp.", inputPh="Enter your query.", value: ""} 
  ]; 
  
  this.state = { colDataArr: initialColumns } 
  

  そして、あなたのやるレンダリング中：あなたの状態は以下のようになる可能性が

render() { 
    let expandInput = this.expandInput; 
    <div> 
    {this.state.colDataArr.map(colItem, index => { 
     <Column 
     checked = {colItem.checked} 
     checkText = {colItem.checkText} 
     ... 
     expandInput = {(e) => { expandInput(e) }} // <== special here 
     colID = {index}       // and here 
    })} 
    </div> 
} 

と一緒に、小道具として機能expandInputをとる（ステートレス）<Column>コンポーネントを作成します。他の変数の小道具。この関数が呼び出されるたびに、イベントが取得されますが、列のインデックス（0〜4）も取得されます。このような何かを見ることができる

そうすれば、expandInputの内側に、あなたが扱うことができる一人の個人の更新

expandInput(event, type, index) { 
    // create copy of column object, to avoid mutating state directly 
    let origColData = this.state.colDataArr[index] 
    let newColData = { 
    checked = origColData.checked, 
    checktext = origColData.checkText, 
    ... 
    } 
    // now, do whatever you need with the event data to update the newColData 
    if (type == "checkbox") { 
    let checked = e.target.checked 
    } else { 
    ... 
    } 
    // copy the array and replace the updated one 
    let newColArr = this.state.colDataArr.slice() 
    newColArr[index] = newColData 
    // set the new state 
    this.setState({ colDataArr : newColArr }) 

} 

UPDATE
そして、あなたのピカピカの新しいステートレスコンポーネント：

class Column extends React.Component { 
    constructor(props) { 
    super(props) 
    } 
    render() { 
    <div className="col-md-2 sbm-source"> 
     <input type="checkbox" 
     onClick={(e) => this.props.expandInput(e,"checkbox", this.props.colID)}/> 
     {this.props.checkText} 
     <br /> 
     <input type="text" size="10" 
     onChange={(e) => this.props.expandInput(e,"text", this.props.colID)} 
     placeholder={this.props.inputPH} /> 
     <button 
     onClick={(e) => this.props.expandInput(e,"button", this.props.colID)}> 
     Do something 
     </button> 
    </div> 
    } 
} 

Answer 2

少し簡単な方法ではなく、nameで正確なフィールド変数名を格納し、実行することです。

handleChecked(e){ 
    this.setState({[e.value.name]: true}); 
    ... 
}