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

Question

我需要制作一个复选框（类似于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} />

它几乎可以工作，但是：

1. 即使props等于 value={true}
2. 通过单击此切换按钮，它会更改，但不会更改。我的意思是，如果我放了prop value={true}，那么无论我在浏览器中做什么，从理论上讲都是一样的？

我错过了什么？

Answer 1

您需要使用checked属性而不是value。尝试这样的事情：

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

value属性可以是任何东西，但实际上驱动切换的属性称为 checked