Question

我正在做一个反应项目，我希望得到两个选择器的当前值，并将它们的值重新分配给不同的状态：this.state.sliderMaxSelected和this.state.sliderMinSelected但它们永远不会更新。为什么呢？

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>
        );
    }
}

Answer 1

  _handleChangeSliderMin(e){
        console.log("min")
        console.log(e.target.value)//You will get the value
        this.setState({sliderMinSelected: e.target.value});
        console.log(this.state.sliderMinSelected)//You will get undefined value
    }

    _handleChangeSliderMax(e){
        console.log("max")
        console.log(e.target.value)// you will get the value
        this.setState({sliderMaxSelected: e.target.value});
        console.log(this.state.sliderMaxSelected)////You will get undefined value
}

这个原因是，一旦触发了setState，就会重新呈现DOM。因此，您无法获得更新值。

因此，如果要查看更新后的状态，请在渲染中进行控制。

 render() {
  if(this.state.sliderMaxSelected)
  console.log(this.state.sliderMaxSelected);
}

EDIT1：改为

    <select className="form-control" id="select1"
       value={this.state.sliderMaxSelected} onChange={this._handleChangeSliderMax.bind(this)}>
   {sliderMaxValues }
   </select>

无法获取选择值并重新分配

1 个答案: