react获取循环出来的复选框的值

忘是亡心i 2023-10-09 03:11 44阅读 0赞

*  简单代码

import React, { Component } from "react";
    import { Checkbox } from "semantic-ui-react";
    import { getlistStaff } from "../action/registerAction";
    import { connect } from "react-redux";
    import "react-table/react-table.css";
    import _ from "lodash";
    class ReportSite extends Component {
      constructor(props) {
        super(props);
        this.state = {
          allCheckDocValue: []
        };
      }
      handleDocCheck(data, i, staff) {
        const checkDoctorValue = {
          siteId: staff.siteId,
          index: i,
          checked: data.checked,
          email: staff.email
        };
        if (!_.isEmpty(checkDoctorValue) && checkDoctorValue.checked === true) {
          this.state.allCheckDocValue.push(checkDoctorValue);
        } else if (
          !_.isEmpty(checkDoctorValue) &&
          checkDoctorValue.checked === false
        ) {
          _.remove(this.state.allCheckDocValue, {
            siteId: checkDoctorValue.siteId,
            index: checkDoctorValue.index
          });
        }
        console.log("checkDoctorValue", checkDoctorValue);
      }
      componentDidMount() {
        const { getlistStaff } = this.props;
        getlistStaff();
      }
      render() {
        return (
          <div>
            {this.props.listStaff.map((staff, i) => {
              if (
                staff.siteId.indexOf(props.original.siteId) !== -1
              ) {
                const idName = "Doctor_Checkbox" + i;
                return (
                  <div key={"staff-" + i}>
                    <Checkbox
                      id={idName}
                      onChange={(e, data) =>
                        this.handleDocCheck(
                          data,
                          i,
                          staff
                        )
                      }
                      name="selectDoc"
                      label={
                        staff.isPrescribing
                          ? "Dr." + staff.lastName
                          : staff.firstName
                      }
                    />
                  </div>
                );
              }
              return null;
            })}
          </div>
        );
      }
    }
    const mapStateToProp = state => ({
      listStaff: state.patientsListStore.listStaff
    });
    const mapDispatchToProp = dispatch => ({
      getlistStaff: () => dispatch(getlistStaff())
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(ReportSite);

然后选择之后，this.state.allCheckDocValue会将值一个个的打印出来，这时候，一般页面内还会有一个提交按钮，在提交按钮页面内将这些放在一个数组

for (let j = 0; j < this.props.allCheckDocValue.length; j++) {
          if (
            !_.isEmpty(this.props.allCheckDocValue[j]) &&
            this.props.allCheckDocValue[j].checked === true
          ) {
            selectValue = this.props.allCheckDocValue[j];
            this.state.allCheckDocValue.push(selectValue);
          } else if (
            !_.isEmpty(this.props.allCheckDocValue[j]) &&
            this.props.allCheckDocValue[j].checked === false
          ) {
            _.remove(this.state.allCheckDocValue[j], {
              siteId: this.props.allCheckDocValue[j].siteId,
              index: this.props.allCheckDocValue[j].index
            });
          }
        }

*  实际项目中实现全选、取消全选（例子用到了redux）

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

App.js

import React, { Component } from "react";
    import { Checkbox, Button } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    import SendReport from "./sendReport";
    import { connect } from "react-redux";
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    import {
      changeDoctorSelect,
      changeReportList,
      resetAllReport
    } from "../action/doctorReportAction";
    class ReportSite extends Component {
      constructor(props) {
        super(props);
        this.handleClear = this.handleClear.bind(this);
      }
      handleClear() {
        const { resetAllReport } = this.props;
        resetAllReport();
      }
      handleSiteCheck(siteId) {
        const { changeReportList } = this.props;
        changeReportList(this, siteId);
      }
      handleDocCheck(siteId, staff) {
        const { changeDoctorSelect } = this.props;
        changeDoctorSelect(this, siteId, staff.email);
      }
      render() {
        return (
          <div className="boxlistcontainer">
            <ReactTable
              data={
                this.props.clinicSites &&
                this.props.clinicSites.map(p => {
                  return {
                    ...p
                  };
                })
              }
              filterable
              defaultFilterMethod={(filter, row) =>
                String(row[filter.id]) === filter.value
              }
              columns={[
                {
                  columns: [
                    {
                      Header: "Actions",
                      accessor: "",
                      sortable: false,
                      filterable: false,
                      Cell: props => {
                        return (
                          <Checkbox
                            onChange={(e, data) =>
                              this.handleSiteCheck(props.original.siteId)
                            }
                            checked={this.props.reportList.hasOwnProperty(
                              props.original.siteId
                            )}
                            name="selectSite"
                          />
                        );
                      }
                    }
                  ]
                },
                {
                  columns: [
                    {
                      Header: "Doctor",
                      style: { overflow: "auto", textAlign: "left" },
                      accessor: "",
                      sortable: false,
                      filterable: false,
                      Cell: props => {
                        return (
                          <div>
                            {this.props.listStaff.map((staff, i) => {
                              if (
                                staff.siteId.indexOf(props.original.siteId) !== -1
                              ) {
                                const idName = "Doctor_Checkbox" + i;
                                return (
                                  <div key={"staff-" + i}>
                                    <Checkbox
                                      id={idName}
                                      checked={
                                        !!(
                                          this.props.reportList.hasOwnProperty(
                                            props.original.siteId
                                          ) &&
                                          this.props.reportList[
                                            props.original.siteId
                                          ].includes(staff.email)
                                        )
                                      }
                                      onChange={(e, data) =>
                                        this.handleDocCheck(
                                          props.original.siteId,
                                          staff
                                        )
                                      }
                                      name="selectDoc"
                                      label={
                                        staff.isPrescribing
                                          ? "Dr." + staff.lastName
                                          : staff.firstName
                                      }
                                    />
                                  </div>
                                );
                              }
                              return null;
                            })}
                          </div>
                        );
                      }
                    }
                  ]
                }
              ]}
              defaultPageSize={20}
              defaultSorted={[
                {
                  id: "siteId",
                  desc: false
                }
              ]}
              className="-striped -highlight"
              minRows={0}
            />
            <div className="add_import_box" style={
       { textAlign: "center" }}>
              <SendReport />
              <Button size="small" onClick={this.handleClear}>
                Cancel
              </Button>
            </div>
          </div>
        );
      }
    }
    const mapStateToProp = state => ({
      clinicSites: state.patientsListStore.clinicSites,
      listStaff: state.patientsListStore.listStaff,
      reportList: state.reportListStore.reportList
    });
    const mapDispatchToProp = dispatch => ({
      省略几个获取listStaff，和clinicSites的接口，这个不属于本部分内容
      resetAllReport: () => dispatch(resetAllReport()),
      changeReportList: (self, siteId) => dispatch(changeReportList(self, siteId)),
      changeDoctorSelect: (self, siteId, doctorId) =>
        dispatch(changeDoctorSelect(self, siteId, doctorId))
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(App);

sendReport.js

import React, { Component } from "react";
    import { Modal, Button, Icon, Input } from "semantic-ui-react";
    import { sendDocReport } from "../action/addAction";
    import { connect } from "react-redux";
    import ButtonSuccess from "./buttonSuccess";
    import DatePicker from "react-datepicker";
    import "react-datepicker/dist/react-datepicker.css";
    import moment from "moment";
    import _ from "lodash";
    const ReportType = [{ type: "TEST", key: "1" }, { type: "DOCTOR", key: "2" }];
    class sendReport extends Component {
      constructor(props) {
        super(props);
        this.state = {
          open: false,
          confirmSuccess: false,
          type: "TEST",
          toEmails: "",
          siteIds: [],
          doctorEmails: [],
          startDay: new Date(moment().add(-3, "days"))
        };
        this.handleConfirm.bind(this);
      }
      show = () => {
        this.setState({ open: true, confirmSuccess: false });
      };
      changeDay(date) {
        this.setState({ startDay: date });
      }
      handleTypeChange = event => {
        this.setState({ type: event.target.value });
      };
      changeEmail = event => {
        this.setState({ toEmails: event.target.value });
      };
      handleConfirm = () => {
        if (this.state.type === "TEST" && _.isEmpty(this.state.toEmails)) {
          alert("Please input email");
        } else if (this.state.type === "TEST" && !_.isEmpty(this.state.toEmails)) {
          this.setState({ confirmSuccess: true });
          const { sendDocReport } = this.props;
          const sendValue = {
            siteIds: this.state.siteIds,
            startDay: moment(this.state.startDay).format("YYYY-MM-DD"),
            type: this.state.type,
            toEmails: this.state.toEmails
          };
          sendDocReport(sendValue, this);
        } else if (this.state.type === "DOCTOR") {
          this.setState({ confirmSuccess: true });
          const { sendDocReport } = this.props;
          const sendValue = {
            siteIds: Object.keys(this.props.reportList),
            startDay: moment(this.state.startDay).format("YYYY-MM-DD"),
            type: "SEND_TO_DOCTOR",
            doctorEmails: JSON.stringify(this.props.reportList)
          };
          sendDocReport(sendValue, this);
        }
      };
      handleCancel = () =>
        this.setState({
          open: false,
          confirmSuccess: false,
          siteIds: [],
          doctorEmails: [],
          type: "TEST"
        });
      render() {
        const { open } = this.state;
        return (
          <Modal
            trigger={
              <Button size="small" onClick={this.show}>
                Send
              </Button>
            }
            open={open}
          >
            <Modal.Header>Send Report</Modal.Header>
            <Modal.Content>
              {this.state.confirmSuccess ? (
                <ButtonSuccess />
              ) : (
                <div className="newSite_box">
                  <div className="inputTotal">
                    <p className="inputLable">Start Day</p>
                    <DatePicker
                      className="DOBPicker"
                      selected={this.state.startDay}
                      onChange={this.changeDay.bind(this)}
                    />
                  </div>
                  <div className="inputTotal">
                    <p className="inputLable">Type</p>
                    <select
                      className="selectStyle"
                      onChange={(e, data) => {
                        this.handleTypeChange(e);
                      }}
                      ref={input => (this.type = input)}
                    >
                      {ReportType.map((rtype, i) => {
                        return (
                          <option value={rtype.type} key={"rtype" + i}>
                            {rtype.type}
                          </option>
                        );
                      })}
                    </select>
                  </div>
                  <div
                    className="inputTotal"
                    style={
       {
                      display: this.state.type === "TEST" ? "block" : "none"
                    }}
                  >
                    <p className="inputLable">To Emails</p>
                    <Input
                      placeholder="Johnsmith@email.com"
                      className="inputContent"
                      onChange={this.changeEmail}
                      value={this.state.toEmails}
                    />
                  </div>
                </div>
              )}
            </Modal.Content>
            <Modal.Actions style={
       { textAlign: "center" }}>
              <Button
                color="green"
                onClick={e => this.handleConfirm()}
                style={
       {
                  display: this.state.confirmSuccess ? "none" : "inline-block"
                }}
              >
                <Icon name="checkmark" />
                Ok
              </Button>
              <Button basic color="red" onClick={e => this.handleCancel()}>
                <Icon name="remove" />
                {this.state.confirmSuccess ? "Close" : "Cancel"}
              </Button>
            </Modal.Actions>
          </Modal>
        );
      }
    }
    const mapStateToProp = state => ({
      reportList: state.reportListStore.reportList
    });
    const mapDispatchToProp = dispatch => ({
      sendDocReport: (sendValue, self) => dispatch(sendDocReport(sendValue, self))
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(sendReport);

doctorReportAction.js

import _ from "lodash";
    import * as TYPES from "../types/types";
    
    export function changeReportList(self, siteId) {
      return dispatch => {
        let docReportList = _.clone(self.props.reportList);
        if (docReportList.hasOwnProperty(siteId)) {
          delete docReportList[siteId];
        } else {
          let doctorList = [];
          _.forEach(self.props.listStaff, function(item) {
            if (item.siteId.includes(siteId)) {
              doctorList.push(item.email);
            }
          });
          Object.assign(docReportList, { [siteId]: doctorList });
        }
        dispatch(changeReportListStatus(docReportList));
      };
    }
    
    export function changeDoctorSelect(self, siteId, doctorId) {
      return dispatch => {
        let docReportList = _.clone(self.props.reportList);
        if (docReportList.hasOwnProperty(siteId)) {
          if (docReportList[siteId].includes(doctorId)) {
            let index = docReportList[siteId].indexOf(doctorId);
            docReportList[siteId].splice(index, 1);
            if (docReportList[siteId].length === 0) {
              delete docReportList[siteId];
            }
          } else {
            docReportList[siteId].push(doctorId);
          }
        } else {
          let doctorList = [];
          doctorList.push(doctorId);
          Object.assign(docReportList, { [siteId]: doctorList });
        }
        dispatch(changeReportListStatus(docReportList));
      };
    }
    
    function changeReportListStatus(reportList) {
      return {
        type: TYPES.DOCTOR_REPORT_LIST,
        text: reportList
      };
    }
    
    export function resetAllReport() {
      return dispatch => {
        dispatch(resetAllReportState());
      };
    }
    function resetAllReportState() {
      return {
        type: TYPES.RESET_ALL_REPORT
      };
    }

types.js

export const DOCTOR_REPORT_LIST = "doctor_report_list";
    export const RESET_ALL_REPORT = "reset_all_report";

reducer.js

import * as TYPES from "../types/types";
    
    const initialState = {
      reportList: {}
    };
    
    export default function reportListReducer(state = initialState, action) {
      switch (action.type) {
        case TYPES.DOCTOR_REPORT_LIST:
          return {
            ...state,
            reportList: action.text
          };
        case TYPES.RESET_ALL_REPORT:
          return {
            ...state,
            reportList: {}
          };
        default:
          return state;
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190926133234885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70