Ich möchte auf den Wert eines benutzerdefinierten Optionsattributs zugreifen, bin jedoch gescheitert und kann mein Problem nicht lösen. Kann mir bitte jemand helfen, mein Ziel zu erreichen?

Code

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

Ich möchte auf den Wert data-set in der Konsole zugreifen. Wie wäre es möglich? Bitte helfen Sie mir.

1
Jonas 21 Feb. 2020 im 22:00

3 Antworten

Beste Antwort

Wenn Sie mit onChange(event) umgehen, werden ausgewählte Optionen (einzeln für reguläres <select>) als Array innerhalb des event -Objekts verschachtelt: event.target.selectedOptions.

Um das data-set -Attribut dieses Knotens zu erhalten, verwenden Sie einfach die Element.getAttribute() -Methode.

Mit ein wenig Destrukturierung kann Ihre Aufgabe so einfach gelöst werden:

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>
0
Yevgen Gorbunkov 21 Feb. 2020 im 22:54

Wenn Sie ein handleChange -Ereignis in der Auswahl haben, z. B. mit bidirektionaler Bindung, können Sie wie folgt darauf zugreifen:

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

Im Render könnte es so aussehen:

<select value={this.state.value} onChange={this.handleChange}>
0
MrCode 23 Feb. 2020 im 15:27
const val = document.querySelector("option[value=\"1\"]").getAttribute('data-set')
console.log(val)
<option value="1" data-set="demo">Value 1</option>

Oder

const val = document.querySelector("option[value=\"1\"]").dataset.set
console.log(val)
0
Evgeny Yudin 21 Feb. 2020 im 19:07