как я могу хранить и получать доступ к атрибутам данных на элементах, таких как опции выбора в React

Question

Я бы хотел получить атрибут данных из опции с помощью реакции, но по какой-то причине я не могу и получаю нулевое значение.

<select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}>
    <option value="" data-industry="industry1">Select Industry</option>
    <option value="" data-industry="industry2">Select Industry 2</option>
</select>

onIndustryChangeOption(event, index, value) {
   console.log(event.target.getAttribute('data-industry'));
   this.props.setRootState({selectedIndustry: event.target.value});
}

Это не работает, я уверен, что должны быть какие-то другиеспособ сделать это!

Answer 1

event.target - это select, а не option.Вам нужно получить option:

onIndustryChangeOption(event, index, value) {
  const {target} = event;
  const option = target.options[target.selectedIndex];
  if (option) {
    console.log(option.getAttribute('data-industry'));
    //this.props.setRootState({selectedIndustry: event.target.value});
  }
}

Live Пример:

class Example extends React.Component {
  render() {
    return <select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}>
        <option value="" data-industry="industry1">Select Industry</option>
        <option value="" data-industry="industry2">Select Industry 2</option>
    </select>;
  }

  onIndustryChangeOption(event, index, value) {
    const {target} = event;
    const option = target.options[target.selectedIndex];
    if (option) {
      console.log(option.getAttribute('data-industry'));
      //this.props.setRootState({selectedIndustry: event.target.value});
    }
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

<div id="root"></div>
<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>

---

Тем не менее, в данном примере непонятно, почему бы вместо этого не использовать value.: -)

Answer 2

Просто передайте ссылку обратного вызова и событие захвата, используйте атрибут value

<select onChange={this.onIndustryChangeOption} value={this.props.selectedIndustry}>
    <option value="industry1">Industry 1</option>
    <option value="industry2" >Industry 2</option>
</select>

onIndustryChangeOption(event) {
   this.props.setRootState({selectedIndustry: event.target.value});
}