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 代码：

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>
    );
}

Redux 表单自定义下拉菜单

Redux Form Custom Dropdown Menu

reactjs

redux

redux-form