reactjs - react Prop 上的受控复选框(切换)。

Question

我需要制作一个复选框(切换，如IOS)组件，它不使用状态并且仅通过 Prop 进行控制。当前代码如下所示:

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