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);
我创建了一个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>
菜单项不会将主文本作为道具。
另一答案
@ 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 时重新渲染选项,如何防止?