Redux-form Material-UI下拉列表未显示下拉列表,选择

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Redux-form Material-UI下拉列表未显示下拉列表,选择相关的知识,希望对你有一定的参考价值。

我使用Material-ui选择@material-ui/core/Select和redux-form作为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);

当点击组合框选项时,它出现在enter image description here下面,如enter image description here

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

答案

只需将MenuItems更改为

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

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

Description of solution

另一答案

@ S.Haviv在我改变时提到过

<MenuItem value="1" text="value 1" /><MenuItem value='1'>value 1</MenuItem>菜单项出现但点击不成功。所以我不得不摆脱Select字段中的onclick处理程序,我还为组件添加了一个标签

这是完整组件https://codesandbox.io/s/l2pqoryvvl?fontsize=14的代码

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

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

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
    <FormControl>
      <InputLabel >{label}</InputLabel>
      <SelectField
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        children={children}
        {...custom}
        />
    </FormControl>

  );

const Form = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field
          name="value"
          component={renderSelectField}
          label="Choose a Value"
          value="1"
        >
          <MenuItem value="1">value 1 </MenuItem>
          <MenuItem value="2">value 2 </MenuItem>
          <MenuItem value="3">value 3 </MenuItem>
        </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" // a unique identifier for this form
})(Form);

以上是关于Redux-form Material-UI下拉列表未显示下拉列表,选择的主要内容,如果未能解决你的问题,请参考以下文章

Material-UI 和 Redux-form,点击 select 时重新渲染选项,如何防止?

如何从状态填充Redux-Form选择/下拉列表

React Material-UI 下拉菜单不起作用

如何清除表单中的某些字段 - Redux-Form

需要在不使用 onChange 回调的情况下获取下拉菜单的值 - (material-ui reactjs)

如何在 Material-ui 表中添加垂直列分隔符