javascript - 如何在reactjs中选择默认复选框

Question

我需要默认选中复选框。例如，我有输出

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

我发送到数据库，数据库给我发送数据，我想在编辑时显示从数据库发送的数据。

我只想根据我的输出默认选中复选框。

这是我的初始状态

    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;
  };

这些方法适用于每个组，例如这是我的两个 Angular 色 - 一个是组，另一个是 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 } });
  };

渲染(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中选中的复选框？ 这是codesanbox: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 可能不是最佳实践，但我认为它符合您目前的需求