javascript 如何在react中进行验证,如果我从下拉菜单中选择了一个选项,则该选项将在其他下拉菜单中被禁用

vnjpjtjt  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(133)

我正在设计一个表单中的React,我有两个类别的下拉菜单。一个是命名为“什么包括”,另一个是“什么是不包括”。现在我想,如果用户选择任何选项从菜单中的“什么包括”,那么该选项(项目)将被禁用在另一个下拉菜单命名为“什么不包括”。
以下是句柄更改和UI的代码:

const [personwhatIncludeItems, setPersonwhatIncludeItems] = React.useState(
    []
  );
  const [personnotIncludeItems, setPersonnotIncludeItems] = React.useState([]);

  const handlenotIncludeItemsChange = (event) => {
    const {
      target: { value },
    } = event;
    setPersonnotIncludeItems(
      // On autofill we get a stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };
  

  const handlewhatIncludeItemsChange = (event) => {
    const {
      target: { value },
    } = event;
    setPersonwhatIncludeItems(
      // On autofill we get a stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };
    <div className="col-6 mt-2 mb-2">
                        <FormControl fullWidth>
                          <InputLabel id="multiple-include-label">
                            {" "}
                            Includes
                          </InputLabel>
                          <Select
                            labelId="whatInclude-multiple-checkbox-label"
                            id="whatInclude-multiple-checkbox"
                            multiple
                            value={personwhatIncludeItems}
                            onChange={handlewhatIncludeItemsChange}
                            input={<OutlinedInput label="Tag" />}
                            renderValue={(selected) => selected.join(", ")}
                            MenuProps={MenuProps}
                          >
                            {whatIncludeArr.map((whatIncludeItems) => (
                              <MenuItem
                                key={whatIncludeItems}
                                value={whatIncludeItems}
                              >
                                <Checkbox
                                  checked={
                                    personwhatIncludeItems.indexOf(
                                      whatIncludeItems
                                    ) > -1
                                  }
                                />
                                <ListItemText primary={whatIncludeItems} />
                              </MenuItem>
                            ))}
                          </Select>
                        </FormControl>
                      </div>
                      <div className="col-6 mt-2 mb-2">
                        <FormControl fullWidth>
                          <InputLabel id="multiple-not-include-label">
                            {" "}
                            Not Includes
                          </InputLabel>
                          <Select
                            labelId="whatnotInclude-multiple-checkbox-label"
                            id="whatnotInclude-multiple-checkbox"
                            multiple
                            value={personnotIncludeItems}
                            onChange={handlenotIncludeItemsChange}
                            input={<OutlinedInput label="Not Include" />}
                            renderValue={(selected) => selected.join(", ")}
                            MenuProps={MenuProps}
                          >
                            {WhatNotIncludeArr.map((notIncludeItems) => (
                              <MenuItem
                                key={notIncludeItems}
                                value={notIncludeItems}
                              >
                                <Checkbox
                                  checked={
                                    personnotIncludeItems.indexOf(notIncludeItems) >
                                    -1
                                  }
                                />
                                <ListItemText primary={notIncludeItems} />
                              </MenuItem>
                            ))}
                          </Select>
                        </FormControl>
                      </div>
y53ybaqx

y53ybaqx1#

不确定我是否完全理解逻辑,但如果目标是禁用选项if selected else where,则可能考虑为每个Map选项添加条件disabled(* 如果其他选定状态已经具有该值,则禁用选项 *),可能如下所示:
以下示例的最小化演示:stackblitz
尽管没有标记为MUI,但发布的代码看起来像MUI,因此示例将使用MUI组件,但如果disabled属性受支持,该方法仍可以与其他库一起使用。

  • “包含内容”* 选择:
<div className="col-6 mt-2 mb-2">
    <FormControl fullWidth>
      <InputLabel id="multiple-include-label"> Includes</InputLabel>
      <Select
        labelId="whatInclude-multiple-checkbox-label"
        id="whatInclude-multiple-checkbox"
        multiple
        value={personwhatIncludeItems}
        onChange={handlewhatIncludeItemsChange}
        input={<OutlinedInput label="Tag" />}
        renderValue={(selected) => selected.join(", ")}
        MenuProps={MenuProps}
      >
        {whatIncludeArr.map((whatIncludeItems) => (
          <MenuItem
            key={whatIncludeItems}
            value={whatIncludeItems}
            // 👇 Added disable condition here
            disabled={personnotIncludeItems.includes(whatIncludeItems)}
          >
            <Checkbox
              checked={personwhatIncludeItems.indexOf(whatIncludeItems) > -1}
              // 👇 Added disable condition here
              disabled={personnotIncludeItems.includes(whatIncludeItems)}
            />
            <ListItemText primary={whatIncludeItems} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </div>
  • “不包括的内容”* 选择:
<div className="col-6 mt-2 mb-2">
    <FormControl fullWidth>
      <InputLabel id="multiple-not-include-label"> Not Includes</InputLabel>
      <Select
        labelId="whatnotInclude-multiple-checkbox-label"
        id="whatnotInclude-multiple-checkbox"
        multiple
        value={personnotIncludeItems}
        onChange={handlenotIncludeItemsChange}
        input={<OutlinedInput label="Not Include" />}
        renderValue={(selected) => selected.join(", ")}
        MenuProps={MenuProps}
      >
        {WhatNotIncludeArr.map((notIncludeItems) => (
          <MenuItem
            key={notIncludeItems}
            value={notIncludeItems}
            // 👇 Added disable condition here
            disabled={personwhatIncludeItems.includes(notIncludeItems)}
          >
            <Checkbox
              checked={personnotIncludeItems.indexOf(notIncludeItems) > -1}
              // 👇 Added disable condition here
              disabled={personwhatIncludeItems.includes(notIncludeItems)}
            />
            <ListItemText primary={notIncludeItems} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </div>

相关问题