我正在尝试使用以下命令更改复选框的值onChange
另一个输入字段的功能。
我有这样的事情:
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
组件是这样的:
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>
);
};
初始加载时的复选框值设置为 false。当用户更改价格范围滑块的值时,我希望复选框值更改为 true。
当用户将价格范围滑块的值更改为其初始值(最小值和最大值)时,我希望复选框值再次更改为 false。
它在我的示例中不起作用。
有任何想法吗?