Reactjs Can'；设置其值后，单击复选框

设置其值后，我无法选中/取消选中我的复选框

我试过同时使用onClick和onChange，但都不起作用。不知道还有什么可以尝试的。我还将其绑定到构造函数中

<section id="publish-section-5">
  <div class="Grid">
    <div class="Col Col--6">
      <div class="grid-block">
        <div class="Form-group publish-insights-input">
          <div class="Form-checkbox is-restricted">                        
              <input
              id="isRestricted"
              name="checkboxDefault"
              type="checkbox"
              checked={this.state.insightsDTO['isRestricted'] == 'Y'}
              onClick={this.handleCheckbox}
            />  
            <label for="restricted">Is Restricted</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>        

我只想能够单击/取消单击它，即使设置了值。

回答：

import React from 'react';

class Hello extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      insightsDTO: {
        checkboxDefault: true,
      },
    }
  }

  handleCheckbox = (e) => {
    this.setState({
      insightsDTO: {
        ...this.state.insightsDTO,
        [e.target.name]: !this.state.insightsDTO[e.target.name],
      },
    })
  }

  render() {
    return (
      <section id="publish-section-5">
        <div class="Grid">
          <div class="Col Col--6">
            <div class="grid-block">
              <div class="Form-group publish-insights-input">
                <div class="Form-checkbox is-restricted">                        
                    <input
                    id="isRestricted"
                    name="checkboxDefault"
                    type="checkbox"
                    checked={this.state.insightsDTO.checkboxDefault}
                    onChange={this.handleCheckbox}
                  />  
                  <label for="restricted">Is Restricted</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    )
  }
};

export default Hello;

从“React”导入React；
类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
见解：{
checkboxDefault:true，
},
}
}
handleCheckbox=（e）=>{
这是我的国家({
见解：{
…此.state.insightsdo，
[e.target.name]：！this.state.InsightsTo[e.target.name]，
},
})
}
render（）{
返回(
限制
)
}
};
导出默认Hello；

您正在将“isRestricted”设置为true或false：

//isRestricted:true
[e.target.id]：e.target.checked

然后用“Y”来测试它：

// always false, because the value is never 'Y'
checked={this.state.insightsDTO['isRestricted'] == 'Y'}

尝试将其更改为：

checked={this.state.insightsDTO['isRestricted']}

---

你能和我们分享一下你的原始状态是什么样子吗？你正在将状态与“Y”进行比较，但将其设置为选中的

，这将是真的还是假的。我没有；不要检查完整的代码。我同意。@Annah您可以使用
id
或
name
，但使用
name
更为传统。
checked={this.state.insightsDTO['isRestricted']}