(Реагирует) Как сделать так, чтобы флажок UI выглядел проверенным после изменения состояния? - PullRequest
Новая
       15

(Реагирует) Как сделать так, чтобы флажок UI выглядел проверенным после изменения состояния?

0 голосов
/ 30 марта 2019

Как изменить пользовательский интерфейс компонента 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} />
);

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

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

Пример: 

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

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

this.setState((prevState) => { isChecked: !prevState.isChecked});
0 голосов
/ 30 марта 2019

Добро пожаловать в сообщество, вам нужно передать проверенное истину / ложь компоненту 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

...