Question

我需要创建一个复选框（切换，就像IOS）组件，它不使用状态，只能通过props控制。当前代码如下所示：

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} />

它几乎可以工作，但是：

看起来未经检查，即使道具等于value={true}
通过点击此切换，它会发生变化，但不应该更改。我的意思是，如果我把道具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

Answer 2

如果复选框由道具控制，则必须更新道具并重新呈现页面，以使其显示新值。

如何显示此组件，由父页面调用，如果是，您是否可以发布父级代码...

此外，在handlechange功能中，您可以执行console.log(this.props)并查看复选框道具的价值是什么，例如它是否被切换？如果是，您可以使用componentWillReceiveProps(newProps)调用this.setState({})并从那里触发重新渲染，但我怀疑道具值实际上没有更新

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

2 个答案: