Блог

У меня есть модуль, в котором, если я поставлю флажок, состояние isRequiredDate false превратится в true, иначе вернется в false. Основываясь на моих исследованиях, они предлагают использовать ! состояние для изменения логического значения. Однако, когда я поставил галочку в первой строке, обязательный атрибут применялся ко всей строке таблицы, даже если я щелкнул только по первой строке. Я не знаю, как это называется, но надеюсь, что деталей достаточно.

О моем состоянии:

 isRequiredNewCheckDate:false,
 

Флажок обработчика:

 handleChange = async (e, index) => {

    let newArray = "";
    
    if (e.target.checked === true) {
        
     

        await this.setState({
            isRequiredNewCheckDate: !this.state.isRequiredNewCheckDate
        })
        

    } else {


        await this.setState({
            isRequiredNewCheckDate: !this.state.isRequiredNewCheckDate
        })


    }

   

};
 

Флажок ввода:

 <input
    ref={"ref_"   id}
    type="checkbox"
    id={"checkbox_"   id}
    name={"checkbox_"   id}
    value={id}
    data-newchekdate={new_check_date}
    onChange={e => this.handleChange(e,id)}
    
    
/>
 

Вот дата ввода, в которой мне нужно установить необходимый атрибут, как только флажок установлен:

 <td className="boder-gray">
    <input type="date"  value={new_check_date == null ? "" : new_check_date} name="checkDate" required={this.state.isRequiredNewCheckDate} onChange={e => this.handleInputNewCheckDate(e, index, id,  check)} className="form-control" />
</td>
 

Я предполагаю id , что в input -это индекс, и он уникален для каждой строки. В этом случае включите isRequiredNewCheckDate логическое значение в массив, а затем отобразите его соответствующим образом:

Флажок обработчика:

 handleChange = async (e, index) => {

    let newArray = [...this.state.isRequiredNewCheckDate];
    newArray[index] = e.target.checked;
    await this.setState({isRequiredNewCheckDate: newArray});
};
 

В HTML-коде:

 <td className="boder-gray">
    <input type="date"  value={new_check_date == null ? "" : new_check_date} name="checkDate" required={this.state.isRequiredNewCheckDate[id]} onChange={e => this.handleInputNewCheckDate(e, index, id,  check)} className="form-control" />
</td>
 

Это должно работать должным образом.