Reactjs 道具上的反应控制复选框（切换）。

我需要制作一个复选框（像IOS一样切换）组件，它不使用状态和控件，只使用道具。当前代码如下所示：

export class Checkbox extends React.Component {

handleChange(event) {
   this.props.onChange({value: event.target.value});
}

render() {
    return (
        <span>
             <input class="ios_toggle" type="checkbox"
                 value={this.props.value}
                 disabled={this.props.disabled}
                 onChange={this.handleChange}
             />
        </span>
     );
 }
}

<Checkbox value={true} disabled={false} />

导出类复选框扩展了React.Component{
手变（活动）{
this.props.onChange（{value:event.target.value}）；
}
render（）{
返回(
);
}
}

我是这样使用它的：

export class Checkbox extends React.Component {

handleChange(event) {
   this.props.onChange({value: event.target.value});
}

render() {
    return (
        <span>
             <input class="ios_toggle" type="checkbox"
                 value={this.props.value}
                 disabled={this.props.disabled}
                 onChange={this.handleChange}
             />
        </span>
     );
 }
}

<Checkbox value={true} disabled={false} />

它几乎可以工作，但是：

即使props等于

value={true}

通过点击这个开关，它会改变，但不应该改变。我的意思是，如果我把prop

value={true}

，理论上它是一样的，不管我在浏览器中用它做什么

---

我错过了什么

您需要使用

checked

属性，而不是

值

。请尝试以下方法：

export class Checkbox extends React.Component {

  handleChange = () => {
     this.props.onChange({ checked: !this.props.checked });
  }

  render() {
      return (
          <span>
               <input class="ios_toggle" type="checkbox"
                   value={this.props.value}
                   disabled={this.props.disabled}
                   checked={this.props.checked}
                   onChange={this.handleChange}
               />
          </span>
       );
   }
}

导出类复选框扩展了React.Component{
handleChange=（）=>{
this.props.onChange（{checked:！this.props.checked}）；
}
render（）{
返回(
);
}
}

---

value属性可以是任何内容，但它实际驱动切换的属性称为

选中的

使用e.target.checked，而不是e.target.value。console.log是一个用于调试的有用函数，可以打印出返回您不期望的值的变量。在

handleChange

中的

this

是什么？是否是

复选框

组件实例？如果是这样，那么它不应该“调用它自己吗？”——当我尝试这个时，如果我调用

this.props.onChange

，在复选框输入中的

onChange

事件上——然后它触发我在父组件的

onChange

属性中放入的

onChange

函数——但是。。。为什么？

此

引用当前的

复选框

实例。执行父级是因为

this.props

正在从父级接收属性，其中一个是父级中定义的

onChange

。例如：

console.log（'这是父项！'）}/>

1。使用匿名函数

onChange={（e）=>this.handleChange（e）}

或2。绑定

this

，例如在构造函数中

this.handleChange=this.handleChange.bind（this）