React native select:访问所选选项的键/索引

Question

我将这个原生select实现为一个dropdown组件。我可以用e.target.value访问选定的值。如何访问映射选项的键值或索引：

<div className={`dropdown ${className} ${isInline ? "dropdown--inline" : ""}`}
style={{ width: width + "px", backgroundColor: styles!.dropdownBackgroundColor, borderColor: styles!.borderColor }}
                    >
    <select className="dropdown__portable-select"
         onChange={e => this.selectItem(e.target.value, true, e.target.index)} value={JSON.stringify(selectedValue)} // This line
                        >
    {selectedValue === unselectedValue && unselectedValue !== undefined ?
       <option value="">{unselectedValue}</option>
       : null}
    {options.map((o: any, index: number) => (
      <option key={index} value={JSON.stringify(o)}>{this.renderValue(o)}</option>
    ))}
  </select>
  <div className="dropdown__spacer" style={{ backgroundColor: styles!.borderColor }} />
  <div className="dropdown__icon-container" style={{ color: styles!.iconColor }}>
    <SvgIcon className="dropdown__icon" iconName="material-design/arrow_down_thin" />
  </div>
</div>

这个问题特别是这一行：

onChange={e => this.selectItem(e.target.value, true, e.target.index)} value={JSON.stringify(selectedValue)}

e.target.index显然不存在。在映射函数中使用e.target.key来寻址索引{key=}也是如此。

如何访问select上的key或index属性？

Answer 1

您可以在select元素上访问名为selectedIndex的属性。

this.selectItem(e.target.value, true, e.target.selectedIndex)

您不能访问key，因为它是由React管理的特殊属性。