Reactjs 无法获取“选择并重新分配”的值

Reactjs 无法获取“选择并重新分配”的值,reactjs,Reactjs,我正在做一个react项目,我想获取两个选择器的当前值,并将它们的值重新分配到不同的状态:this.state.sliderMaxSelected和this.state.sliderSelected,但它们永远不会更新。为什么? import React, {Component, PropTypes} from 'react'; export default class PureDynamicSlider extends Component { constructor() {

我正在做一个react项目,我想获取两个选择器的当前值,并将它们的值重新分配到不同的状态:this.state.sliderMaxSelected和this.state.sliderSelected,但它们永远不会更新。为什么?

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>