Reactjs 无法获取“选择并重新分配”的值
我正在做一个react项目,我想获取两个选择器的当前值,并将它们的值重新分配到不同的状态:this.state.sliderMaxSelected和this.state.sliderSelected,但它们永远不会更新。为什么?Reactjs 无法获取“选择并重新分配”的值,reactjs,Reactjs,我正在做一个react项目,我想获取两个选择器的当前值,并将它们的值重新分配到不同的状态:this.state.sliderMaxSelected和this.state.sliderSelected,但它们永远不会更新。为什么? import React, {Component, PropTypes} from 'react'; export default class PureDynamicSlider extends Component { constructor() {
import React, {Component, PropTypes} from 'react';
export default class PureDynamicSlider extends Component {
constructor() {
super();
this.state = {
sliderMinSelected: 0,
sliderMaxSelected: 10
};
}
shouldComponentUpdate(nextProps) {
return this.props.min !== nextProps.min ||
this.props.max !== nextProps.max;
}
_handleChangeSliderMin(e){
console.log("min")
console.log(e.target.value)
this.setState({sliderMinSelected: e.target.value});
console.log(this.state.sliderMinSelected)
}
_handleChangeSliderMax(e){
console.log("max")
console.log(e.target.value)
this.setState({sliderMaxSelected: e.target.value});
console.log(this.state.sliderMaxSelected)
}
render() {
const {min,max} = this.props;
var sliderMinList = [0,1];
var sliderMinValues =[];
var sliderMaxList = [2,3,4,5,6,7,8,9,10];
var sliderMaxValues =[];
for (var index in sliderMinList) {
sliderMinValues.push(<option key={index} value={sliderMinList[index]}>{"Valeur "+sliderMinList[index]}</option>);
}
for (var index in sliderMaxList) {
sliderMaxValues.push(<option key={index} value={sliderMaxList[index]}>{"Valeur "+sliderMaxList[index]}</option>);
}
return (
<div>
<select className="form-control" id="select1"
value={this.state.sliderMinSelected} onChange={this._handleChangeSliderMin.bind(this)}
>
{sliderMinValues}
</select>
<p>{this.state.sliderMinSelected}</p>
<select className="form-control" id="select1"
value={this.state.sliderMaxSelected} onChange={this._handleChangeSliderMax}
>
{sliderMaxValues}
</select>
<p>{this.state.sliderMaxSelected}</p>
</div>
);
}
}
这是因为,一旦启动setState,DOM就会重新呈现。因此,无法获取更新值
因此,如果要查看更新的状态,请在render中对其进行控制台操作
render() {
if(this.state.sliderMaxSelected)
console.log(this.state.sliderMaxSelected);
}
编辑1:更改为
<select className="form-control" id="select1"
value={this.state.sliderMaxSelected} onChange={this._handleChangeSliderMax.bind(this)}>
{sliderMaxValues }
</select>
请尝试onChange={this.\u handleChangeSliderMax}到onChange={this.\u handleChangeSliderMax.bindthis}
<select className="form-control" id="select1"
value={this.state.sliderMaxSelected} onChange={this._handleChangeSliderMax.bind(this)}>
{sliderMaxValues }
</select>