Reactで可変長のinputを扱いたい
inputのvaluesを配列で保持するときに、どのinputの値が変化したのかをindexのようなものから取得して配列を更新するようにしなければならないと考えますが、そのようなことは可能でしょうか。コンポーネントのrender()は以下のとおりです。
render(){
var posList = this.state.query.pos.map((p) => {
return (
<TextField
key={p}
value={p}
onChange={this.onQueryChanged}
disabled={this.state.loading}
/>
);
});
var negList = this.state.query.neg.map((n) => {
return (
<TextField
key={n}
value={n}
onChange={this.onQueryChanged}
disabled={this.state.loading}
/>
);
});
return (
<div>
<Col xs={12} md={6}>
<p>Positive</p>
{posList}
<IconButton
onClick={this.onAddPositive}
>
<FontIcon className="material-icons">add_circle</FontIcon>
</IconButton>
</Col>
<Col xs={12} md={6}>
<p>Negative</p>
{negList}
<IconButton
onClick={this.onAddNegative}
>
<FontIcon className="material-icons">add_circle</FontIcon>
</IconButton>
</Col>
<FlatButton
label="Send"
disabled={this.state.loading}
/>
</div>
);
}
TextField
のonChange
で配列を更新したいのですができますでしょうか。onChange
のインタフェースは以下のとおりです。
onChange(event, value)