Проверка и снятие флажка в зависимости от условий

#reactjs

#reactjs

Вопрос:

Я хочу, чтобы флажок был установлен и снят в соответствии с приведенными ниже условиями :

Если facility_id = default_facility_id , он должен проверяться, в противном случае он не должен проверяться.

 this.state = {
default_facility_id: "",
}

 async componentDidMount() {
facility_id api call...
await fetch(API_URL, requestOptions)
        .then(res => res.json())
        .then((data) => {
            console.log(data.params[0])
            if (data.status) {

                this.setState({
                    facility_id: data.params[0].facility_id,
})
.catch(console.log)

default_facility_id api call
fetch(API_URL, requestOptionsDU)
            .then(res => res.json())
            .then((data) => {
                console.log(data)
                if (data.status) {
                    this.setState({
                        default_facility_id: data.params[0].default_facility_id,
                    })


                }
            })
            .catch(console.log)
}
  

Теперь я отобразил так:

 {this.state.default_facility_id===this.state.facility_id?
<div className="custom-control custom-checkbox mb-3">
    <input type="checkbox" className="custom-control-input" id={"default_facility_id"} onChange={() => false} checked={this.state.default_facility_id} />
    <label className="custom-control-label" onClick={() => { let szs = this.state.default_facility_id; console.log(szs); szs = !szs ? 1 : 0; this.setState({ default_facility_id: szs }) }} ></label>
</div>
:null}
  

Здесь, если facility_id не равен default_facility_id , флажок снимается, но я хочу снять флажок.

Ответ №1:

Вы завершаете свой <div> ввод {this.state.default_facility_id===this.state.facility_id? ... :null} , поэтому результат этого будет null , когда ваше условие будет применено. Удалите это.

Упрощенный (без раздувания):

 <div>
    <input type="checkbox" checked={this.state.default_facility_id === this.state.facility_id} />
</div>