Как выбрать групповой флажок и * в reactjs - PullRequest
Новая
       5

Как выбрать групповой флажок и * в reactjs

0 голосов
/ 19 марта 2020

Я хочу установить флажок на основе группы. Проблема в том, что когда я нажимаю на группу, флажок целиком установлен. Я не хочу устанавливать весь флажок. это мое начальное состояние. 

const plainOptions = ["can_view", "can_create", "can_update"];
state = {
  checkedList: [],
  indeterminate: true,
  checkAll: false
};

Метод: onchange метод в основном работает с каждым отдельным флажком. 

onChange = checkedList => {
  console.log(checkedList);
  this.setState({
    checkedList,
    indeterminate:
      !!checkedList.length && checkedList.length < plainOptions.length,
    checkAll: checkedList.length === plainOptions.length
  });
};

Этот метод работает для всех выбранных флажков 

onCheckAllChange = e => {
  console.log(e.target.checked);
  this.setState({
    checkedList: e.target.checked ? plainOptions : [],
    indeterminate: false,
    checkAll: e.target.checked
  });
};
{
  ["group", "topGroup"].map(item => (
    <div className="site-checkbox-all-wrapper">
      <Checkbox
        indeterminate={this.state.indeterminate}
        onChange={this.onCheckAllChange}
        checked={this.state.checkAll}
      >
        {item}
      </Checkbox>
      <CheckboxGroup
        options={plainOptions}
        value={this.state.checkedList}
        onChange={this.onChange}
      />
    </div>
  ));
}

Однако мой принятый формат данных: 

{group:["can_view","can_create"],topGroup:["can_view","can_create"}

Я хочу получить этот формат вывода, когда пользователь установил флажок

Вот песочница с кодом: https://codesandbox.io/s/agitated-sea-1ygqu

1 Ответ

1 голос
/ 19 марта 2020

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

["group", "topGroup"].map(item => (
  <div className="site-checkbox-all-wrapper">
    <Checkbox
      indeterminate={this.state.indeterminate}
      onChange={this.onCheckAllChange}
      checked={this.state.checkAll}
    >
      {item}
    </Checkbox>
    <CheckboxGroup
      options={plainOptions}
      value={this.state.checkedList}
      onChange={this.onChange}
    />
  </div>
));

Обе group и topGroup используют одинаковые this.state.checkList state.

Самый простой способ решить эту проблему - извлечь каждую группу в отдельный компонент. Таким образом, они имеют свое собственное состояние отдельно друг от друга.

Edit stackoverflow-a-60764570-3982562-v1

Вы также можете оставить один компонент, но вы должны управлять несколькими внутренние состояния. Например, вы можете использовать state = { checkList: [[], []] }, где первый подмассив предназначен для хранения состояния group, а второй под массив - для хранения состояния topGroup.

Если группы являются динамическими c Вы можете просто map над группами и создать свои состояния следующим образом: 

state = { checkList: groups.map(() => []) };

Вам также потребуется управлять несколькими состояниями indeterminate и checkAll. Этого можно избежать, если вывести их из состояния checkList. Например: 

isIndeterminate(index) {
  const checkList = this.state.checkList[index];
  return checkList.length > 0 && checkList.length < plainOptions.length;
}

Это также позволит избежать конфликтного состояния, поскольку существует один источник правды.

...