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

Question

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

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

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

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

Вот мой 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 } });
  };

Render ( UI)

 <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? Вот кодексанокс: https://codesandbox.io/s/stackoverflow-a-60764570-3982562-v1-rsnjt?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Передайте его как 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, возможно, Я не думаю, что это лучшая практика, но в данный момент она соответствует вашим требованиям