Question

我已经将此本地选择实现为下拉组件。我可以使用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都可以解决map函数中的key = {index}。

如何访问select上的键或索引属性？

Answer 1

有一个名为selectedIndex的HTML属性，您可以在select元素上进行访问。

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

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

反应本机选择：访问键/所选选项的索引

1 个答案: