reactjs - 如何禁用/灰显 setSubmittedNominees 状态下可用的两条记录的下拉选择复选框？

Question

如何在 react hooksdisable/gray中为状态中可用的两条记录退出下拉选择复选框？setSubmittedNominees我试图将 submitNominees 传递给 selectedValues 和 disablePreSelectedValues(true) 但它不起作用，有人可以就此提出建议吗？代码框链接：

https://codesandbox.io/s/magical-haslett-s0oeh?file=/src/App.js

import React, { useRef, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useForm } from "react-hook-form";
import Axios from "axios";
import { Link, useHistory } from "react-router-dom";
import Multiselect from "multiselect-react-dropdown";

const options = [
  { id: 1, name: "Ath", email: "[e-mail]", access: null },
  { id: 2, name: "Arnolds", email: "[e-mail]", access: null },
  { id: 3, name: "Alter", email: "[e-mail]", access: null },
  { id: 4, name: "Brandan", email: "[e-mail]", access: null },
  { id: 5, name: "Ron", email: "[e-mail]", access: null },
  { id: 6, name: "Rads", email: "[e-mail]", access: null },
  { id: 7, name: "Sam", email: "[e-mail]", access: null }
];

const submitted = [
  { id: 4, name: "Brandan", email: "[e-mail]", access: null },
  { id: 5, name: "Ron", email: "[e-mail]", access: null }
];
const Selection= () => {
  const [option, setOption] = useState([]);
  const [selectedOption, setSelectedOption] = useState([]);
  const [nomRegister, setNomRegister] = useState([{}]);
  const [helperText, setHelperText] = useState("");
  const [userEmail, setUserEmail] = useState("");
  const [submittedNominees, setSubmittedNominees] = useState([{}]);
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
    reset
  } = useForm();
  const maxOptions = 3;
  const history = useHistory();

  useEffect(() => {
    const userEmail = localStorage.getItem("loginEmail");
    setUserEmail(userEmail);
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await Axios.get(
          "http://localhost:8000/service/nomineeslist"
        );
        //const data1 = res.data;
        setOption(options);
        console.log("Get the list of nominees :" + JSON.stringify(res.data));
      } catch (e) {
        console.log(e);
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // const res = await Axios.get(
        //   "http://localhost:8000/service/submittednominees"
        // );
        setSubmittedNominees(submitted);
      } catch (e) {
        console.log(e);
      }
    };
    fetchData();
  }, []);

  const handleTypeSelect = (e, i) => {
    const copy = [...selectedOption];
    copy.push(e[i]);
    setSelectedOption(copy);
  };

  const sendNomination = () => {
    console.log("What the Array holds: " + JSON.stringify(nomRegister));
    const fetchData = async (nomRegister) => {
      try {
        const res = await Axios.post(
          "http://localhost:8000/service/nominateperson",
          { userEmail },
          nomRegister
        );
        if (res.data) {
          console.log("Print data:" + res.data);
          const successMessage = res.data.message;
          setHelperText(successMessage);
          setNomRegister(reset);
        }
      } catch (e) {
        console.log(e);
        setNomRegister(reset);
        setHelperText(e.message);
      }
    };
    fetchData();
  };

  options.forEach((option) => {
    option.displayValue = option.name + "\t" + option.email;
    submittedNominees.forEach((item) => {
      let subEmail = item.email; // how can I pass those two email to selectedValues and make it  disable ?
    });
  });

  const handleChange = (e, i) => {
    const { name, email, value } = e.target;

    // immutating state (best practice)
    const updateList = nomRegister.map((item) => {
      return { ...item };
    });

    const select_Email = selectedOption.map((item) => {
      return item.email;
    });

    //change the specific array case depends on the id //email:emailList[i],
    updateList[i] = {
      ...updateList[i],
      name: name,
      email: select_Email[i],
      reason: value
    };
    setNomRegister(updateList);
  };

  return (
    <div className="App">
      <h1>Nominate a person</h1>
      <div className="nomineeSelectBox">
        <div id="dialog2" className="triangle_down1" />
        <div className="arrowdown">
          <Multiselect
            onSelect={(e) => handleTypeSelect(e, selectedOption.length)}
            options={selectedOption.length + 1 === maxOptions ? [] : options}
            displayValue="displayValue"
            selectedValues={subEmail}
            showCheckbox={true}
            emptyRecordMsg={"Maximum nominees selected !"}
          />
        </div>
      </div>
      <div className="nominationcount"></div>
      <form onSubmit={handleSubmit(sendNomination)}>
        <div className="nomineesSelectedList">
          <h4>Selected Nominees</h4>
          {selectedOption.map((x, i) => (
            <div key={i}>
              <div className="row eachrecord">
                <div className="column">
                  <label className="nomlabel">
                    {x?.name} <b>>></b>
                  </label>
                </div>
                <input
                  required
                  type="textarea"
                  placeholder="Please provide reason for nomination.."
                  key={i}
                  id={i}
                  name={x?.name}
                  className="nomineechoosed"
                  onChange={(e) => handleChange(e, i)}
                />
              </div>
            </div>
          ))}

          <div className="row">
            <div className="buttongroup">
              <input id="Submit" type="submit" value="Submit" />
              <input id="Cancel" type="button" value="Cancel" />
            </div>
          </div>
        </div>
      </form>
      <span className="nominationValidationText">{helperText}</span>
    </div>
  );
};

export default Selection;

标签： reactjsreact-hooks

Answer 1

这里的问题是您通过displayValue ( displayValue="displayValue") 显示下拉选择复选框，并且submitted您将分配给submittedNominees( setSubmittedNominees(submitted))的数组不包含displayValue：

const submitted = [
  { id: 4, name: "Brandan", email: "[e-mail]", access: null },
  { id: 5, name: "Ron", email: "[e-mail]", access: null }
];

解决方案：：

1. 让你submitted的例子像这样：

const submitted = [
  {
    id: 4,
    name: "Brandan",
    email: "[e-mail]",
    access: null,
    displayValue: "Brandan  [e-mail]"
  },
  {
    id: 5,
    name: "Ron",
    email: "[e-mail]",
    access: null,
    displayValue: "Ron  [e-mail]"
  }
];

2. 添加selectedValues={submittedNominees}到您Multiselect以找出您将禁用哪些值：

<Multiselect
  onSelect={(e) => handleTypeSelect(e, selectedOption.length)}
  options={selectedOption.length + 1 === maxOptions ? [] : options}
  displayValue="displayValue"
  disablePreSelectedValues={true}
  selectedValues={submittedNominees}
  showCheckbox={true}
  emptyRecordMsg={"Maximum nominees selected !"}
/>

代码沙盒链接