访问键值

【问题标题】：Access key value访问键值
【发布时间】：2020-05-20 16:09:41
【问题描述】：

在我的渲染中，我有一个选择，对于选项我使用.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 }) };

【问题讨论】：

标签： javascript reactjs dictionary key state

【解决方案1】：

一种方法是将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 对并使用 bracket notation 更新状态：

handleChange = event => {
  const [key, value] = event.target.value.split(":");
  this.setState({ [key]: value });
};

如果您的值可能包含 : ，请选择另一个分隔符。

【讨论】：