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

Question

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

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

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

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

对此

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

问题是当我单击它时，它不会更改要在界面中选中的复选框，我需要重新加载页面以使其选中

这是我的代码片段：

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 function 或 checked{} 属性，或 onChange{} 属性。

Answer 1

为了更改清单，您必须将checked的道具设置为 state 中的变量。 这样，当您执行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>
        )
    }
}