我应该如何从react元素中的custom属性获取值？

Question

Below is my html looks like.....

<select onclick={this.handleClick}>
    <option key="1" value="aaa" data-plan-id="test"></option>
</select>

Below is my handleClick event code

console.log(e.target.value);   // this will output aaa

My question is how can I get the value from "data-plan-id" attribute which is "test"??

Answer 1

Just read selectedOptions HTMLCollection and take the first option from it:

console.log(e.target.selectedOptions[0].getAttribute('data-plan-id'));

With modern browsers (IE11+, see support ) you can use dataset interface instead of getAttribute :

console.log(e.target.selectedOptions[0].dataset.planId);

Answer 2

You need to loop through all the <option> of the <select> and check if the value are same. If yes, check for dataset . This will have plan-id .

Ps. Javascript will convert dashed data attribute to camelCase plan-id -> planId

Hope this helps!

 class App extends React.Component{ constructor(){ super() this.onChange = this.onChange.bind(this) this.state = { component: 'A' } } onChange(e){ [...e.target.childNodes].forEach((el) => { //convert HTML collection to array if(el.value === e.target.value) console.log(el.dataset.planId) }) this.setState({ component: e.target.value }) } render(){ return <div> <select onChange={this.onChange} selected={this.state.component}> <option value="aaa" data-plan-id="a plan">A</option> <option value="bbb" data-plan-id="b plan">B</option> </select> </div> } } ReactDOM.render(<App/>, document.getElementById('app')) 

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