How to get previous value of <select> in React?

Question

An example.

red is selected from the very start.

Then I select green. That is, from red to green.

I can get new value green in event.currentTarget.value. But how do I get previous red?

<select className="foo" onChange={this.onSectChange} value="red">
    <option value="no color">No Color</option>
    <option value="red">Red</option>  // this one is selected
    <option value="green">Green</option> // this one I will select
    <option value="blue">Blue</option>
</select>

onSectChange = (event) => {

    let prevVal = event.??? // How to get a previous value, that is Red
    let newVal = event.currentTarget.value; // Green - is a new value just selected, not previous

}

I mean, does React provide this functionality out-of-the-box along with their SyntheticEvent creation? Or do I still have to hack to get it?

Solution 1

You can use React's controlled components to achieve this. The state will have the previous value.

<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
<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>

<script type="text/babel">
class Select extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      select: 'red',
    }
    this.onSectChange = this.onSectChange.bind(this)
  }
  
  onSectChange(e) {
    var newVal = e.target.value
    console.log(this.state.select, newVal)
    this.setState({
      select: newVal,
    })
  }
  
  render() {
    return <select className="foo" onChange={this.onSectChange} value={this.state.select}>
    <option value="no color">No Color</option>
    <option value="red">Red</option>  // this one is selected
    <option value="green">Green</option> // this one I will select
    <option value="blue">Blue</option>
    </select>  
  }

}
ReactDOM.render(<Select/>, document.getElementById('app'))
</script>

Solution 2

currentTarget is a property supported by browsers and it doesn't have anything to do with React, in itself.

SyntheticEvent is just a wrapper around the browser's native event, which exposes certain browser events.

The closest thing to what you're trying to do that comes to mind is Event.originalTarget, but it's an experimental feature only implemented in Mozilla.

So, to answer your question: no, React doesn't provide that functionality out of the box. And I wouldn't say you need a hack to get the previous value of your dropdown menu.

For instance, you could use componentWillReceiveProps and compare nextProps with this.props.

Please provide more details, if I misunderstood your question.