子から親コンポーネントに入力値を渡す方法

Question

私はリアクションを学んでおり、データをフィルタリングするために入力付きのテーブルコンポーネントを構築しています。私の構造は次のとおりです。

• FilterBar
• • FilterInput

私が欲しい私のFilterBarこのよう==>this.state = {inputsVal: ["input1value", "input2value", "", ...]}にクラス状態でFilterInput値を格納できます。
私は各ヘッダ（データベース内の属性）の入力コンポーネントを動的に構築します。ですから、これらのコンポーネントの1つに書き込むと、FilterBar状態配列をリフレッシュするために、このコンポーネントの新しい値と位置を取得したいと考えています。私はコンポーネントの位置（インデックス）を取得することに成功しましたが、値は取得しませんでした。私はこれを達成する方法を知らない。ここに私のコンポーネントは次のとおりです。

class FilterBar extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     inputs: Array(props.headers.length).fill("") 
    }; 
    this.updateFilters = this.updateFilters.bind(this); 
} 

updateFilters(i) { 
    console.log(i); //==>I can see the index of the input when it changesbut i want also to see the new value 
} 

renderFilterInputs() { 
    var filters = [] 
    for (let i=0; i < this.state.inputs.length; i++) { 
     filters.push(<FilterInput key={i} filterApplied={this.state.inputs[i]} onChange={() => this.updateFilters(i)} />); 
    } 
    return filters; 
} 

render() { 
    return (
     <tr className="filters-bar"> 
     {this.renderFilterInputs()} 
     </tr> 
    ); 
} 

}
、ここでFilterInputコンポーネント

class FilterInput extends React.Component { 
    render() { 
     return (
      <td> 
       <input type='text' className="form-control" defaultValue={this.props.filterApplied} onChange={() => this.props.onChange()} /> 
      </td> 
     ); 
    } 
} 

はあなたに

Answer 1

あなたは、入力のFilterInputonChange=ハンドラを変更する必要がありますハンドラとあなたが持っていることを確認し、親で：

<FilterInput onChange={this.updatefilters.bind(i)} /> 

updatefiltersがにバインドされていることを確認してくださいコンストラクタで最初にを入力します。

Answer 2

変更ようのonChange感謝されています。そして、あなたのupdateFiltersを変更

filters.push(<FilterInput key={i} filterApplied={this.state.inputs[i]} onChange={(evt) => this.updateFilters(i, evt)} />); 

を今通過したイベントから価値を得る中：あなたはonChangeに値またはイベントの生を渡すのいずれか二つの間のAPIの契約を設計し、明らかに

<input onChange={event => this.props.onChange(event.target.value)} {...otherProps} /> 

：

updateFilters(i, evt) { 
    const value = evt.target.value; 
    .... 
}