Блог

Главная - Вопросы по программированию - (Реагировать) Как заставить пользовательский интерфейс checkbox выглядеть отмеченным после изменения состояния?

(Реагировать) Как заставить пользовательский интерфейс checkbox выглядеть отмеченным после изменения состояния?

#javascript #reactjs #state #concat

#javascript #reactjs #состояние #конкатенация

Вопрос:

Как изменить пользовательский интерфейс компонента CheckBox? Состояние мутирует точно так, как я хотел, однако флажок не выглядит установленным после вызова onCheck (при нажатии на него).

Я предполагаю, что я должен создать или использовать существующий реквизит для входных объектов:

     onCheck = item => {
        this.setState(prevState => ({
      usage: prevState.usage.concat(item.label, ",")
        }));
        //Todo: Display as checked
      };



    {checkboxes.map(item => (
                  <div className="d-inline-block w-50 p">
                    <CheckBox
                      name={item.name}
                      onChange={this.onCheck.bind(this, item)}
                    />
                    <label key={item.key}>{item.label}</label>
                  </div>
                ))}


    const CheckBox = ({ type = "checkbox", name, checked = false, onChange    }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

Комментарии:

1. key Свойство должно быть у <div> элемента, а не у <label> элемента.

Ответ №1:

Добро пожаловать в сообщество, вам нужно передать компоненту CheckBox значение true / false с отметкой Checkbox

 <CheckBox 
name={item.name}
checked={this.state.usage.includes(item.label)}
onChange={this.onCheck.bind(this, item)}
/>

Также вам не нужно включать ‘,’ при объединении, поскольку оно создает массив
Обратитесь к ссылке для справкиhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Ответ №2:

Вам нужно включить свойство checked, и вы можете использовать состояние для его обработки. Допустим "isChecked" .

Пример:

 <CheckBox checked={this.state.isChecked} > (  your previously added properties)

И вы бы включили что-то подобное в свою функцию:

 this.setState((prevState) => { isChecked: !prevState.isChecked});