无法更改要检查的复选框，必须重新加载要检查的页面答案

【问题标题】：Can't change checkbox to be checked, must reload page to be checked无法更改要检查的复选框，必须重新加载要检查的页面
【发布时间】：2020-04-08 01:02:17
【问题描述】：

我有一个数据表，它有复选框字段，允许人们选中或取消选中它。

如果我单击未选中的复选框，它将发送到数据库以使该清单的状态为真，如如果我单击选中的复选框，它将发送到数据库以使该清单的状态为假。我已经做到了，并在数据库中进行了更改状态。

如果我单击未选中的复选框，这是 JSON 数据，从此

data={"Id":"123", "checklist": false}

到这里

data={"Id":"123", "checklist": true}

问题是当我点击它时它并没有改变要在界面中检查的复选框，我需要重新加载页面以使其选中

这是我的代码 sn-p:

class Apps extends React.Component {
    constructor (props) {
      super(props);
      this.state = {
        blablabla:"ex"
      }
      this.onCheckChange=this.onCheckChange.bind(this)
    }

    onCheckChange(e){
      console.log(e.target.checked)
      this.setState({
        [e.target.name]:e.target.checked
      })
    }
    onSubmitChecklistClicked = async (Id) => {
      var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, {Id})
      console.log(response);
    }

    render () {
        return(
            <Input type="checkbox" className="input-checked" 
            checked={data.checklist}
            onChange={this.onCheckChange,() => this.onSubmitChecklistClicked(data.Id)}></Input>
        )
    }
}

第一次检查或取消检查清单是基于数据库给出的JSON，我不知道哪一个是我的问题，在 onCheckChange 函数或 checked{} 属性，或 onChange{} 属性。

【问题讨论】：

标签： java html reactjs

【解决方案1】：

为了改变清单，您必须将 checked 属性设置为您所在州的变量。这样，当您执行 setState 时，组件将再次渲染，这次输入的 checked 属性将设置为 false。

示例代码是这样的

class Apps extends React.Component {
    constructor (props) {
      super(props);
      this.state = {
        isChecked: false, // or true depending on what you want
        ...
      }
      this.onCheckChange=this.onCheckChange.bind(this)
    }

    onCheckChange(e){
      console.log(e.target.checked)
      this.setState({
        isChecked: e.target.checked // set the variable in the state
      })
    }
    onSubmitChecklistClicked = async (Id) => {
      var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, {Id})
      console.log(response);
    }

    render () {
        return(
            <Input type="checkbox" className="input-checked" 
            checked={this.state.isChecked} // use it here
            onChange={this.onCheckChange,() => this.onSubmitChecklistClicked(data.Id)}></Input>
        )
    }
}

【讨论】：