在我的渲染中,我有一个选择,对于选项,我使用.map
,如下所示:
<select value={this.state.eixo} onChange={this.handleChange}>
<option value=""></option>
{this.state.eixos.map((item) => {
return <option key={item.id}>{item.descricao}</option>
})}
</select>
我想要我在handleChange
方法中选择的选项中的密钥,我尝试了这样的东西,但它似乎不起作用:
handleChange = (event) => { this.setState({ key: event.target.value }) };
一种方法是将option
的值设置为key:value
对,
<select value={this.state.eixo} onChange={this.handleChange}>
<option value=""></option>
{this.state.eixos.map(item => {
return (
<option key={item.id} value={`${ite.id}:${item.descricao}`}>
{item.descricao}
</option>
);
})}
</select>;
然后拆分e.target.value
以获取key
:value
配对并使用括号表示法更新状态:
handleChange = event => {
const [key, value] = event.target.value.split(":");
this.setState({ [key]: value });
};
如果您的值可以包含:
,请选择其他分隔符。