reactjs - Redux-form Material-UI 下拉菜单不显示下拉菜单，选择

Question

我使用带有 redux-form 的 Material-ui 选择@material-ui/core/Select作为 HOC。我已创建表单并出现选择框，但未显示选项。

这是我的组件

import React from "react";
import { Field, reduxForm } from "redux-form";

import SelectField from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

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 Form = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field
          name="favoriteColor"
          component={renderSelectField}
          label="Favorite Color"
        >
          <MenuItem value="1" primaryText="value 1" />
          <MenuItem value="2" primaryText="value 2" />
          <MenuItem value="3" primaryText="value 3" />
        </Field>
      </div>

      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "form" 
})(Form);

单击此处的组合框选项时 显示如下

我创建了一个代码框实例 https://codesandbox.io/s/l2pqoryvvl?fontsize=14

标签： reactjsmaterial-uiredux-form

Answer 1

只需将 MenuItems 更改为

  <MenuItem value="1">value 1</MenuItem>
  <MenuItem value="2">value 2</MenuItem>
  <MenuItem value="3">value 3</MenuItem>

菜单项不将主要文本作为道具。