一个例子。
red从一开始就被选中。
然后我选择green。也就是说，从red to green.
我可以获得新的价值green in event.currentTarget.value。但我怎样才能获得以前的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
}
我的意思是，React 是否提供了开箱即用的功能以及它们的功能？SyntheticEvent创建？或者我仍然需要破解才能获得它？
你可以使用React的受控组件 https://facebook.github.io/react/docs/forms.html#controlled-components为了达成这个。这state将具有先前的值。
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
