Reference Material UI onChangeハンドラのSelectFieldコンポーネント

Question

私はフォームに多くのSelectFieldコンポーネントがあります（15+） - 私は複数の変更ハンドラ関数を持つことを避けようとしていますが、変更を引き起こした特定の選択を参照して、状態をそれに応じて更新することができます。

id、ref、および以前に聞いたことがあるすべての解決策を追加しようとしましたが、何も機能していません。

<SelectField value={this.state.selectedFramework} onChange={this.handleChange} style={style}> 
    <MenuItem value={0} primaryText="Please select..." /> 
    {this.props.frameworks.map(this.renderMenuItem)} 
</SelectField> 

次のように私の変更ハンドラは次のとおりです。

handleChange = (event, index, value) => { 
    this.setState({selectedFramework: value}); 
}; 

しかし、状態キーがハードコーディングされているので、これは明らかに、複数のselectfieldコンポーネントで使用することはできません。変更を引き起こした選択を参照する必要がありますので、更新する状態キーを知っています。

提案がありますか？

Answer 1

矢印関数を作成し、選択フィールドのインデックスを渡し：

{this.state.selectFields.map((v, i) => { 
    <SelectField value={v} onChange={(e, _, v) => this.handleChange(e, i, v)} style={style}> 
     <MenuItem value={0} primaryText="Please select..." /> 
     {this.props.frameworks.map(this.renderMenuItem)} 
    </SelectField> 
} 

handleChange = (event, index, value) => { 
    const selectFields = this.state.selectFields.slice(); 
    selectFields[index] = value; 
    this.setState({selectFields}); 
};