javascript - 可以从reactjs中的事件处理函数访问选项标签元素的键吗？

Question

我有一个非常具体和奇怪的情况。

我有足够大的对象数组，用于存储需要从选择框中选择的所有对象。

像这样排序:

var optionsArray = [
   {
      name: option1,
      code: f2X
   },

   {
      name: option2,
      code: x21
   },
   ...
   {
      name: option100,
      code: Rga
   },

]

重点是，code 属性与选项名称没有任何关系。

我目前将其放在选择框中，选择该选项后，我需要返回该选项的代码。以下是选择框甚至处理程序当前的样子:

class SelectForm extends Component{
    onChange(e){
       console.log ("option selected", e.target.name);
       //I can access the name, but what I want to access is the the code
    }

    render(){
        var _this = this;

        return (
            <FormGroup controlId="myId">
                <FormControl componentClass="select" onChange={this.onChange}>
                    {
                      optionsArray.map(function(value, key) {
                      return <option key={key}>{value.name}</option>
                      })
                    }
                </FormControl>
                </FormGroup>
        );
    }

所以基本上在事件处理程序中我想访问代码而不是我刚刚选择的选项的名称。

我想也许我可以访问我从键中选择的数组的索引，并执行如下操作:

onChange(e){
   console.log ("selected option code", optionsArray[e.target.key].code);
}

但是键未定义。有什么方法可以访问事件中所选选项的 key 吗？或者更好的是，有没有一种方法可以将代码包含在选项标记中，以便以后可以在事件处理程序中轻松访问它？

Answer 1

您需要在 option 中传递 value 属性，该属性将包含代码值。所以它会是这样的

<FormControl componentClass="select" onChange={this.onChange}>
  {
     optionsArray.map(function(value, key) {
         return <option key={key} value={value.code}>{value.name}</option>
     })
  }
</FormControl>

并像 onChange 函数中的 e.target.value 一样访问它。

onChange(e){
   console.log ("option selected", e.target.value);
}