如何在React中获取<select>的上一个值？
如何在React中获取<select>的上一个值？
提问于 2016-10-17 20:05:21
举个例子。
从一开始就选择了red。
然后我选择green。也就是说，从red到green。
我可以在event.currentTarget.value中获得新值green。但是如何获得以前的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时是否提供了这种开箱即用的功能？或者我仍然需要破解它才能得到它？
回答 4
Stack Overflow用户
发布于 2016-10-17 23:55:26
您可以使用React的controlled components来实现这一点。state将具有先前的值。
<script src="https://unpkg.com/babel-core@5.8.38/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>
Stack Overflow用户
发布于 2016-10-17 22:07:15
使用我们所说的“受控”输入。Here's a good explanation of the concept of controlled and uncontrolled inputs.
在您的案例中：
在构造函数中设置初始状态
constructor(props) {
super(props);
this.state = {dropdownValue: 'red'};
}将select输入的值设置为存储在状态中的值
<select className="foo" onChange={this.onSectChange} value={this.state.dropdownValue}>然后，在您的onChange事件处理函数中，您可以获取之前的值，因为它仍然存储在状态中，然后用来自事件的新值覆盖它
onSectChange = (event) => {
// You haven't yet updated the state, so you still have access to the old value.
let prevVal = this.state.dropdownValue;
let newVal = event.currentTarget.value;
// You need to set the new value in your state so the component is
// rerendered to show the new value as selected
this.setState({dropdownValue: newVal});
}Stack Overflow用户
发布于 2018-10-30 06:29:49
它存储在: e.target.defaultValue中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40085950
复制相关文章
相似问题