select onchange event.value is undefined

Question

In my component I want to do some stuff after the select value has changed.

select:

<select value={current} onChange={this.onSelectChange.bind(this)}>
    {options}
</select>

onchange event:

onSelectChange(event) {
    const { cookies } = this.props;

    // event.value is undefinded
}

I need the props in the event so I use bind(this). But why is event.value undefined (event.target.value also)

I think there is an issue with some other piece of code in the component that uses this select element. If you can put the component code. Otherwise this code is all good and should work. — Hannan, May 12 '17 at 05:39

score 3 · Answer 1 · answered May 12 '17 at 05:33

I think you are doing some other mistake, check the console.

Check this example event.target.value will always have the selected value:

class App extends React.Component{

  onSelectChange(e){
     console.log(e.target.value);
  }

  render(){
     return(
       <select onChange={this.onSelectChange.bind(this)}>
         <option value='1'>1</option>
         <option value='2'>2</option>
         <option value='3'>3</option>
       </select>
     )  
  }
}

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'/>

score 0 · Answer 2 · edited Dec 26 '19 at 10:40

0

You can use also use this method.

<select value={current} onChange={()=>this.onSelectChange(e)}>
    {options}
</select>.

onSelectChange(e) {
  console.log(e.target.value)
}

edited Dec 26 '19 at 10:40

Ch3steR

20,090
4
28
58

answered Dec 26 '19 at 10:01

Shahnad S

983
10
17

select onchange event.value is undefined

2 Answers2