Чекбокс не отражает изменения состояния в 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"],
    });
  };

И, наконец, код флажка в методе рендеринга

                <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 к проверенному атрибуту. В коде нужно написать:

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

Надеюсь на помощь.