Как установить флажок по умолчанию, выбранный в reactjs

Мне нужно установить флажок по умолчанию. Например, у меня есть вывод

{permission:{group:["can_view"],"topGroup":["can_update"]}} .

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

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

Вот мое intitialState

    const group = ["group", "top"];
const groupItems = ["Apple", "Pear", "Orange"];
    this.state = {
      permission: {}
    };

  UNSAFE_componentWillMount() {
    this.setDefault(false);
  }

  setDefault = fill => {
    const temp = {};
    group.forEach(x => (temp[x] = fill ? groupItems : []));
    this.setState({ permission: temp });
  };
  checkLength = () => {
    const { permission } = this.state;
    let sum = 0;
    Object.keys(permission).forEach(x => (sum += permission[x].length));
    return sum;
  };


  isTotalIndeterminate = () => {
    const len = this.checkLength();
    return len > 0 && len < groupItems.length * group.length;
  };
  onCheckTotalChange = () => e => {
    this.setDefault(e.target.checked);
  };
  isTotalChecked = () => {
    return this.checkLength() === groupItems.length * group.length;
  };

Этот метод работает для каждой группы, например, вот две мои роли - одна группа, а другая - topGroup.

  isIndeterminate = label => {
    const { permission } = this.state;
    return (
      permission[label].length > 0 &&
      permission[label].length < groupItems.length
    );
  };
  onCheckAllChange = label => e => {
    const { permission } = this.state;
    const list = e.target.checked ? groupItems : [];
    this.setState({ permission: { ...permission, [label]: list } });
  };
  isAllChecked = label => {
    const { permission } = this.state;
    return !groupItems.some(x => !permission[label].includes(x));
  };

/ ** * этот метод работает для одного элемента, такого как can_view, can_delete, can_update * /

 isChecked = label => {
    const { permission } = this.state;
    return permission[label];
  };

  onChange = label => e => {
    const { permission } = this.state;
    this.setState({ permission: { ...permission, [label]: e } });
  };

Рендеринг (пользовательский интерфейс)

 <Checkbox
          indeterminate={this.isTotalIndeterminate()}
          onChange={this.onCheckTotalChange()}
          checked={this.isTotalChecked()}
        >
          Check Total
        </Checkbox>
        {group.map(label => (
          <div key={label}>
            <div className="site-checkbox-all-wrapper">
              <Checkbox
                indeterminate={this.isIndeterminate(label)}
                onChange={this.onCheckAllChange(label)}
                checked={this.isAllChecked(label)}
              >
                Check all
              </Checkbox>
              <CheckboxGroup
                options={groupItems}
                value={this.isChecked(label)}
                onChange={this.onChange(label)}
              />
            </div>
          </div>
        ))}

Как я могу установить флажок, выбранный в reactjs? Вот codeanbox: https://codesandbox.io/s/stackoverflow-a-60764570-3982562-v1-rsnjt?fontsize=14&hidenavigation=1&theme=dark


reactjs javascript arrays object antd
person sujon    schedule 20.03.2020    source источник
comment
какой у вас флажок по умолчанию?   -  person Abhishek Kulkarni    schedule 20.03.2020
comment
когда я нажимаю на флажок, я получаю какой-то вывод {permission: {group: [can_view], topGroup: [can_update]}}. Я отправляю эту базу данных, но когда я хочу просмотреть, мне нужно показать выбранный флажок   -  person sujon    schedule 20.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Передайте его как props и напрямую установите их на state.

const group = ["group", "topGroup"];
const groupItems = ["can_view", "can_update", "Orange"];

const App = () => {
  const permission = {
    group: ["can_view"],
    topGroup: ["can_update"]
  };
  return <Content permission={permission} />;
};

class Content extends React.Component {
  ...
  componentDidMount() {
    this.setState({ permission: this.props.permission });
  }

Ps: хотя прямая установка props на state может быть не лучшей практикой, тем не менее, я думаю, что это соответствует вашим требованиям в данный момент

введите здесь описание изображения

Изменить stackoverflow-a-60764570-3982562-v1

person keikai    schedule 20.03.2020
comment
Я столкнулся с другой проблемой: когда я загружаю данные из базы данных, я получаю ошибку, которая включает в себя undefined, но со статическими данными все в порядке. isAllChecked = label = ›{const {разрешение} = this.state; return! groupItems.some (x = ›! разрешение [метка] .includes (x)); }; - person sujon; 20.03.2020
comment
можете ли вы посмотреть этот заголовок stackoverflow.com/questions/60779821/ - person sujon; 20.03.2020