Как получить доступ к пользовательскому значению атрибута option в реакции

Question

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

Код

<option value="1" data-set="demo">Value 1</option>

Я хочу получить значение data-set в консоли, как это возможно, пожалуйста, помогите мне?

Answer 1

Если у вас есть событие handleChange в select, например, с двухсторонним связыванием, вы можете получить к нему доступ следующим образом:

handleChange = (e) => {
   console.log( e.target.selectedOptions[0].getAttribute('data-set') );
}

При рендеринге это может выглядеть так:

<select value={this.state.value} onChange={this.handleChange}>

Answer 2

Если вы обрабатываете onChange(event), выбранные параметры (одиночные для обычного <select>) вкладываются как массив в объект event: event.target.selectedOptions.

Чтобы получить атрибут data-set для В этом узле вы просто используете метод Element.getAttribute().

Таким образом, с некоторой деструктуризацией ваша задача может быть решена так же просто, как:

const { render } = ReactDOM

const Select = () => {
  const onSelect = ({target:{selectedOptions:[option]}}) => console.log(option.getAttribute('data-set'))
  return (
    <select onChange={onSelect}>
      <option selected disabled>Select...</option>
      <option value="1" data-set="demo1">Value 1</option>
      <option value="2" data-set="demo2">Value 2</option>
      <option value="3" data-set="demo3">Value 3</option>
    </select>
  )
}

render (
  <Select />,
  document.getElementById('root')
)

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

Answer 3

const val = document.querySelector("option[value=\"1\"]").getAttribute('data-set')
console.log(val)

<option value="1" data-set="demo">Value 1</option>

или

const val = document.querySelector("option[value=\"1\"]").dataset.set
console.log(val)