Redux 表单自定义下拉菜单

Question

我正在尝试使用 redux 表单创建一个下拉菜单选择，这是我的表单代码：

<form
onSubmit={handleSubmit(this.dialogSubmitHandler.bind(this))}
style={{
width: '80%'
}}
>
<Field
label="Type"
name="type"
component={this.renderSelection}
>
<MenuItem value={'price'} primaryText="Price" />
<MenuItem value={'volume'} primaryText="Volume" />
<MenuItem value={'dailyHigh'} primaryText="Daily High" />
<MenuItem value={'dailyLow'} primaryText="Daily Low" />
<MenuItem value={'sma'} primaryText="SMA" />
<MenuItem value={'rsi'} primaryText="RSI" />
<MenuItem value={'macd'} primaryText="MACD" />
</Field>
</form>

这是我的渲染选择代码：

renderSelection(props) {
const {
meta: { touched, error },
label,
onChange
} = props;
const errText = touched && error ? error : '';
return (
<SelectField
floatingLabelText={label}
errorText={errText}
{...props}
onChange={(e, index, val) => onChange(val)}
maxHeight={200}
>
</SelectField>
);
}

这里的问题是，这抛出了一个错误，即"props.onChange"不是一个函数，而在这里的例子中：https://redux-form.com/6.0.0-rc.1/examples/material-ui/，这正是他们这样做的方式。

知道是什么原因导致道具没有onChange功能吗？

Answer 1

好的，事实证明，redux 表单在非文本输入的内容上使用时不能很好地发挥作用。因此，您需要做的是假装下拉菜单是文本输入。使用该想法，每当发生选择时，将该选择值传递给文本输入的 onChange 函数。这会将文本输入的值设置为选择值。最后，将选择字段的值设置为文本输入的值。这是我的代码：

renderSelection(props) {
const {
meta: { touched, error },
label,
input: { onChange, value }
} = props;
const errText = touched && error ? error : '';
return (
<SelectField
floatingLabelText={label}
errorText={errText}
{...props}
value={value}
onChange={(e, index, val) => {
onChange(val);
}}
maxHeight={200}
>
</SelectField>
);
}