复选框不反映ReactJS中状态的更改

Question

我无法让我的reactjs组件反映复选框中状态的实际变化。有没有人能帮忙或者指出我下面的代码有什么问题。

这是我的州

 state = {
    data: {
      name: "",
      address: "",
      city: "",
      country: "",
      mobile_number: "",
      description: "",
      has_conference: false,
      star_rating: "",
    },
    errors: {},
  };

此句柄复选框方法

toggleChange = () => {
    this.setState({
      has_conference: !this.state.data["has_conference"],
    });
  };

最后是render方法中的复选框代码

                <label>
                <input
                  type="checkbox"
                  has_conference={this.state.data["has_conference"]}
                  onChange={this.toggleChange}
                />
                Conferencing
              </label>

Answer 1

在您的代码中有两件事需要更正。

1:在toggleChange中，你不改变this.state.data.has_conference，但是你改变了this.state.has_conference，它不存在于初始状态。要更改this.state.data.has_conference，您需要在toggleChange函数中执行以下操作：

let data = this.state.data
data.has_conference = !data.has_conference
this.setState({data})

2:在中，您需要将this.state.data.has_conference值绑定到checked属性。在代码中，你需要写：

<input type="checkbox" onChange={this.toggleChange} checked={this.state.data.has_conference}

希望这能有所帮助。