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函数。这将输入的文本值设置为选择值。最后，将选择字段的值设置为文本输入的值。这是我的代码：

multiprocessing

Redux表单自定义下拉菜单

1 个答案: