使用嵌套MenuItem的材料Ui的Redux表单不起作用

Question

我是新的反应，Redux形式和材料。我想创建一个嵌套的下拉选择器组件，它可以放在Redux表单中，如下所示：

​

​

下面是用于创建select组件的renderSelectField。

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
  <SelectField
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    onChange={(event, index, value) => input.onChange(value)}
    children={children}
    {...custom}
  />
);

const MaterialUiForm = (props) => {
 

  const { handleSubmit, pristine, reset, submitting, classes } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field
          name="favoriteColor"
          component={renderSelectField}
          label="Favorite Color"
        >
          <MenuItem value="ff0000" primaryText="Red" />
          <MenuItem value="00ff00" primaryText="Green" />
          <MenuItem value="0000ff" primaryText="Blue" />
        </Field>
      </div>
      <div>
        <Field
          id='chapter'
           name='chapter'
           component={SelectMenu}
           label='Chapter'
        />
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

我的SelectMenu组件是

    const chapterFormValues = [
  {
    key: "international-4",
    caption: "France"
  },
  {
    key: "international-5",
    caption: "Africa"
  },
  {
    key: "international-6",
    caption: "United Kingdom"
  },
  {
    key: "usa-key",
    caption: "North America",
    subMenuItems: [
      {
        key: "usaChapter-1",
        caption: "Central"
      },
      {
        key: "usaChapter-2",
        caption: "East"
      }
    ]
  }
];

const SelectMenu = (props) => {

  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen((open) => !open);
  };

  const handleSubMenuClose = () => {
    setOpen((open) => !open);
  };

  const { label, classes } = props;
  const renderMenuItems = () => {
    return (
      chapterFormValues !== undefined &&
      chapterFormValues.map((option) => {
        if (option.hasOwnProperty("subMenuItems")) {
          return (
            <React.Fragment>
              <MenuItem onClick={handleClick} className={classes.menuItem}>
                {option.caption}
                {open ? <IconExpandLess /> : <IconExpandMore />}
              </MenuItem>

              <Collapse in={open} timeout="auto" unmountOnExit>
                <hr />
                {option.subMenuItems.map((item) => (
                  <MenuItem
                    key={item.key}
                    className={classes.subMenuItem}
                    onClick={handleSubMenuClose}
                  >
                    {item.caption}
                  </MenuItem>
                ))}
              </Collapse>
            </React.Fragment>
          );
        }
        return (
          <MenuItem
            className={classes.menuItem}
            key={option.key}
            value={option.caption === "None" ? "" : option.caption}
          >
            {option.caption}
          </MenuItem>
        );
      })
    );
  };

  return (
    <FormControl>
      <InputLabel>{label}</InputLabel>
      <MuiSelect
        input={<Input id={`${props.id}-select`} />}
        value={props.value}
        {...props.input}
        {...props.custom}
      >
        {renderMenuItems()}
      </MuiSelect>
    </FormControl>
  );
};

下面是我创建的代码沙箱的链接。Material UI ReduxForm Select

它可以工作，除非嵌套下拉菜单不更新选择器字段。我对此进行了研究，发现这个问题Stackoverflow redux form with nested lists，但没有解决方案。

有没有人能给我一些建议，告诉我我遗漏了什么？我认为我需要以某种方式将handleSubMenuClose函数中的事件传递回Redux表单，但我对如何做到这一点感到困惑。

Answer 1

好吧，使用Material UI MenuItem不起作用，但我能够使用redux表单并创建一个嵌套的下拉列表。这是我创建的屏幕截图。它没有打开/关闭面板的功能，但它仍然给用户一种嵌套下拉菜单的感觉。

下面是我在SelectMenu方法中更改的代码。关键是使用Material UI Select组件和optgroup元素的本机形式。

const SelectMenu = (props) => {
  

  const { label, classes } = props;
  const renderMenuItems = () => {
    return (
      chapterFormValues !== undefined &&
      chapterFormValues.map((option) => {
        if (option.hasOwnProperty("subMenuItems")) {
          return (
            <React.Fragment>
              <optgroup  label={option.caption} className={classes.menuItem}>
                
                {option.subMenuItems.map((item) => (
                  <option
                    key={item.key}
                    className={classes.subMenuItem}
                  >
                    {item.caption}
                  </option>
             
                ))}
            </optgroup>
            </React.Fragment>
          );
        }
        return (
          <option
            className={classes.menuItem}
            key={option.key}
            value={option.caption === "None" ? "" : option.caption}
          >
            {option.caption === "None" ? "" : option.caption}
          </option>
        );
      })
    );
  };

  return (
    <FormControl>
      <InputLabel>{label}</InputLabel>
      <Select
        native
        input={<Input id={`${props.id}-select`} />}
        value={props.value}
        {...props.input}
        {...props.custom}
      >
        {renderMenuItems()}
      </Select>
    </FormControl>
  );
};

有用的链接是：

HTML / CSS: Nested in a field?

Redux Form Material UI: Select with Nested Lists not working