In my ponent 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)

In my ponent 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)

• javascript
• reactjs
• reactive-programming

• I think there is an issue with some other piece of code in the ponent that uses this select element. If you can put the ponent code. Otherwise this code is all good and should work. – Hannan Commented May 12, 2017 at 5:39

2 Answers 2

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

You can use also use this method.

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

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