Как проверить несколько флажков в реакции. js? - PullRequest
Новая
       7

Как проверить несколько флажков в реакции. js?

0 голосов
/ 08 апреля 2020

Я использую реагировать и. У меня есть массив объектов, который groupKey . Я отображаю флажок с помощью Groupkey, а также у меня есть два разных типа флажка. Одним из них является флажок «Выбрать все». на самом деле это работает, когда пользователь нажимает на флажок «Выбрать все» или «Выбор пользователя» для всех отдельных. Другое - это индивидуальный флажок, пользователь может выбрать отдельно. когда пользователь отправляет на кнопку, то он дает мне этот формат данных ["manage_books", "manage_journals", "manage_deals"]

вот мой пробный код: 

 let defaultCheckedList = ["manage_deals"];


state = {
    groupKey: [{
            id: 1,
            key: "manage_books",
            label: "books"
        },
        {
            id: 2,
            key: "manage_journals",
            label: "journals"
        },
        {
            id: 3,
            key: "manage_deals",
            label: "deals"
        }
    ],
    checkedList: defaultCheckedList,
    output: [],
    indeterminate: true,
    checkAll: false
};
onCheckAllChange = e => {
    this.setState({
        checkedList: e.target.checked ?
            this.state.groupKey.map(item => item.key) :
            [],
        indeterminate: false,
        checkAll: e.target.checked
    });
};

onChange = (e, value) => {
    this.setState({
        checked: e.target.checked,
        output: this.state.output.concat(value)
    });
};
onSubmit = () => {
    console.log(this.state.output)
}

render(UI)

    <
    div >
    <
    div className = "site-checkbox-all-wrapper" >
    Select All <
    Checkbox
indeterminate = {
    this.state.indeterminate
}
onChange = {
    this.onCheckAllChange
}
checked = {
    this.state.checkAll
}
/> <
/div>

I am looping checkbox by groupKey.I am passing key using onChange method. {
        this.state.groupKey.map(item => ( <
            div className = "userpermission-content"
            key = {
                item.id
            } > {
                item.label
            } <
            Checkbox onChange = {
                (e, value) => this.onChange(e, item.key)
            }
            value = {
                item.key
            }
            />{" "} <
            /div>
        ))
    } <
    button onClick = {
        this.onSubmit
    } > submit < /button> <
    /div>
);
}
}

В этом коде , вы можете видеть, что два отдельных флажка изначально выбран, мне нужно получить полностью так: https://codesandbox.io/s/4k6qi

это мой кодовый ящик: https://codesandbox.io/s/check-all-ant-design-demo-vhidd?file= / index. js

1 Ответ

0 голосов
/ 08 апреля 2020

Вот что я придумал

https://codesandbox.io/s/check-all-ant-design-demo-6cm2v?file= / index. js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox } from "antd";

const CheckboxGroup = Checkbox.Group;

class App extends React.Component {
  state = {
    groupKey: [
      { id: 1, key: "manage_books", label: "books" },
      { id: 2, key: "manage_journals", label: "journals" },
      { id: 3, key: "manage_deals", label: "deals" }
    ],
    checked: {},
    output: [],
    indeterminate: true,
    checkAll: false
  };
  onCheckAllChange = e => {
    const { groupKey } = this.state;
    const checked = groupKey.reduce((prev, curr) => {
      return { ...prev, [curr.key]: e.target.checked };
    }, {});
    this.setState({ checked, checkAll: e.target.checked });
  };
  checkAll = () => {};
  onChange = (e, value) => {
    // this.setState({
    //   checked: e.target.checked,
    //   output: this.state.output.concat(value)
    // });
    this.setState(
      state => ({
        checked: { ...state.checked, [value]: e.target.checked }
      }),
      () => {
        const { checked, groupKey } = this.state;
        const values = Object.values(checked);
        if (values.length === groupKey.length && values.every(v => v)) {
          this.setState({ checkAll: true });
        } else {
          this.setState({ checkAll: false });
        }
      }
    );
  };
  render() {
    console.log(this.state.output);
    const { checked, checkAll } = this.state;
    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          Select All
          <Checkbox
            // indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={checkAll}
          />
        </div>
        {this.state.groupKey.map(item => (
          <div className="userpermission-content" key={item.id}>
            {item.label}
            <Checkbox
              onChange={e => this.onChange(e, item.key)}
              value={item.key}
              checked={checked[item.key]}
            />{" "}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
...