如何从元素中得到"关键"？

Question

我想在选择更改时获得选项的值和键.

我知道我可以onChange在event.target.value函数中使用选项的简单值,但是如何获得键？

<select onChange={this.onChangeOption} value={country}>
    {countryOptions.map((item, key) =>
        <option key={key} value={item.value}>
            {item.name}
        </option>
    )}
</select>

Answer 1

您需要将key中的值作为不同的prop传递.

来自docs:

键用作React的提示,但它们不会传递给您的组件.如果组件中需要相同的值,请将其明确地作为具有不同名称的prop传递:

阅读:https://reactjs.org/docs/lists-and-keys.html

Answer 2

传递密钥作为支柱显然可以,但更快的方法是将密钥作为自定义属性包含在html中.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }
  onSelect(event) {
    const selectedIndex = event.target.options.selectedIndex;
        console.log(event.target.options[selectedIndex].getAttribute('data-key'));
  }

  render() {
    return ( 
      <div>
      <select onChange = {this.onSelect}>
       <option key="1" data-key="1">One</option> 
       <option key="2" data-key="2">Two</option>             </select> 
     </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

执行此操作的一个简单方法是：

const functionCall = (event) => {
    console.log(event.target.getAttribute('a-key'));
}

<button a-key={1} onClick={functionCall}>Press Me</button>

我放了 onClick 但你可以使用任何事件。