117
rated 0 times
[
118]
[
1]
/ answers: 1 / hits: 96642
/ 8 Years ago, tue, august 30, 2016, 12:00:00
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>
);
};
The checkbox value on initial load is set to false. When the user changes the value of the price range slider, I want that the checkbox value to change to true.
When the user changes the value of the price range slider to their initial values (min and max values), I want the checkbox value to again change to false.
It isn't working in my example.
Any ideas?
More From » reactjs
