Boky Boky - 3 months ago 22
React JSX Question

Set checkbox value in React JS

I'm trying to change the value of the checkbox with the onChange function of another input field.

I have something like this :

class price extends React.Component {
constructor(props){
super(props);

this.state = {
minValue: 0,
maxValue: 20000,
step: 1000,
firstValue: null,
secondValue: null,
chcboxValue: false
};

this.handleChange = this.handleChange.bind(this);
}

componentWillMount(){
this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue});
}

handleChange(name, event){
let value = event.target.value;
//We set the state value depending on input that is clicked
if(name === "second"){
if(parseInt(this.state.firstValue) < parseInt(value)){
this.setState({secondValue:value});
}
}else{
//The first value can't be greater than the second value
if(parseInt(value) < parseInt(this.state.secondValue)) {
this.setState({firstValue: value});
}
}

//We set the checkbox value
if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)){
this.setState({chcboxValue: true});
}else{
this.setState({chcboxValue: false});
}
}

render(){
const language = this.props.language;
return (
<div>
<div className="priceTitle">{language.price}</div>
<InputRange language={language}
firstValue={parseInt(this.state.firstValue)}
secondValue={parseInt(this.state.secondValue)}
minValue={parseInt(this.state.minValue)}
maxValue={parseInt(this.state.maxValue)}
step={parseInt(this.state.step)}
handleChange={this.handleChange}
chcboxValue={this.state.chcboxValue}/>
</div>
);
}
}


My InputRange component is something like this :

const inputRange = ({language, firstValue, secondValue, minValue, maxValue, step, handleChange, chcboxValue}) => {
return (
<div>
<div className="rangeValues">Range : {firstValue} - {secondValue}</div>


<section className="range-slider">
<input type="checkbox" checked={chcboxValue} />
<input type="range" value={firstValue} min={minValue} max={maxValue} step={step} onChange={handleChange.bind(this, "first")}/>
<input type="range" value={secondValue} min={minValue} max={maxValue} step={step} onChange={handleChange.bind(this, "second")}/>

<div className="minValue">{minValue}</div>
<div className="maxValue">{maxValue}</div>
</section>
</div>
);
};


I that the checkbox value on initial load is set to false. When user changes the values of the price range slider I want that the checkbox value changes to true.

When user changes the values of the price range slider to their initial values (min and max values) I want that the checkbox value again changes to false.

In my exaample it isn't working.

Any ideas?

QoP QoP
Answer

Your example is not working properly because you are checking the value before this.setState() is completed. Don't forget that this.setState() does not immediately mutate the state.

To fix it, you can create a function where you update the value of the checkbox

updateCheckBox(){
   if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)){
        this.setState({chcboxValue: true});
    }else{
        this.setState({chcboxValue: false});
    }
}

and then pass it to your handleChange this.setState() calls.

handleChange(name, event){
    let value = event.target.value;
    //We set the state value depending on input that is clicked
    if(name === "second"){
        if(parseInt(this.state.firstValue) < parseInt(value)){
            this.setState({secondValue:value}, this.updateCheckBox);
        }
    }else{
        //The first value can't be greater than the second value
        if(parseInt(value) < parseInt(this.state.secondValue)) {
            this.setState({firstValue: value}, this.updateCheckBox);
        }
  }

jsfiddle

Comments