Javascript 在React JS中设置复选框值

我正试图用另一个输入字段的

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

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

在我的例子中，它不起作用

---

有什么想法吗？

您的示例工作不正常，因为您正在检查

此.setState（）

完成之前的值。不要忘记

this.setState（）

不会立即改变

状态

要修复此问题，可以创建一个函数，在其中更新复选框的值

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

然后将其传递给您的
handleChange
this.setState（）
调用

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

handleChange（名称、事件）{
让值=event.target.value；
//我们根据单击的输入设置状态值
如果（名称=“秒”）{
if（parseInt（this.state.firstValue）

不确定，但尝试一下：

React.createElement('input',{type: 'checkbox', defaultChecked: false});

或



或

var Checkbox=React.createClass({
getInitialState:函数（）{
返回{
我被检查过：是的
};
},
toggleChange:function（）{
这是我的国家({
isChecked:！this.state.isChecked//翻转布尔值
}，函数（）{
console.log（this.state）；
}.约束（这个）；
},
render:function（）{
返回(
检查我！
);
}
});
React.render（，document.getElementById（'checkbox'）；
这里有一个通用的表单更改处理程序，它也支持复选框

 onFormChange: (e) => {
    // In my example all form values are stored in a state property 'model'
    let model = this.state.model;

    if(e.target.type == 'checkbox') {

      if(model[e.target.name] === false) {
        model[e.target.name] = true;
      } else if(model[e.target.name] === true) {
        model[e.target.name] = false;
      } else {
        // if the property has not be defined yet it should be true
        model[e.target.name] = true;
      }
    } else {
      model[e.target.name] = e.target.value;
    }

    // Update the state
    this.setState({
      model: model
    });
  }

您应该知道如何在react中绑定html输入值。下面是beginer的示例。易于理解

const chk= true

chkchk() ={ console.log("checkbox event fire")}
<input name="abc"
 type="checkbox"  checked={chk.toString()}        
 onChange={chkchk} 
            /> 

const chk=true
chkchk（）={console.log（“复选框事件激发”）}
当用户将价格范围滑块的值更改为其初始值（最小值和最大值）时，您是否确定它是OR（| |）您会说
如果其中一个值不等于最小值和最大值，则表示用户已更改价格滑块，对吗？如果其中一个不等于（假设您更改A而不是B A==初始值| | B==初始值将计算为TRUE，不更改A或B将导致相同的结果，并且仅更改两者将返回TRUE，因此正如您正确地说的，如果其中一个不是初始值，您不希望它返回TRUE，因此它是and运算符）。此外，我不知道您的代码中是否有更多错误，但更改| | for&&是一个好的开始。：）如果其中一个不是初始值，我想返回true。如果最小值==0，最大值==20000，如果Ais从0更改为1000，B相同，因此为20000；那么我想将复选框更改为true。您今天帮了我很多忙。谢谢，伙计：）
 onFormChange: (e) => {
    // In my example all form values are stored in a state property 'model'
    let model = this.state.model;

    if(e.target.type == 'checkbox') {

      if(model[e.target.name] === false) {
        model[e.target.name] = true;
      } else if(model[e.target.name] === true) {
        model[e.target.name] = false;
      } else {
        // if the property has not be defined yet it should be true
        model[e.target.name] = true;
      }
    } else {
      model[e.target.name] = e.target.value;
    }

    // Update the state
    this.setState({
      model: model
    });
  }

const chk= true

chkchk() ={ console.log("checkbox event fire")}
<input name="abc"
 type="checkbox"  checked={chk.toString()}        
 onChange={chkchk} 
            />