Question

给定一个自定义组件：

export const RenderDropDown = (props) => {
    const {values, input, label, type, meta: {touched, error, active}} = props;

    var options = function (value, index) {
        return <Option key={index}
                       value={value} />
    };

    return(
        <div>
        <select {...input}>
            <option value="">--- Select a nationality ---</option>
            {values.map(options)}
        </select>
        </div>
    )
}

包装在Redux表单字段组件中

<Field name="nationality" component={RenderDropDown} values={props.nationalities}/>

我希望当select触发“onChange”事件时，除了Redux-form操作（AKA @@ redux-form / change）

之外，还会调度自定义操作

我怎么能做到这一点？

我试图通过props传递函数来调用并在<select>标记上设置onChange处理程序，但这会覆盖redux-form onChange。

任何帮助表示赞赏！

Answer 1

您需要在自己的自定义onChange中手动调用redux-form onChange以更新redux-form值。像这样：

const { onChange, ... } = props;
...
<select onChange={(e) => {
    const val = e.target.value
    // whatever stuff you want to do
    onChange(val)
}} />

在onchange选择时，在redux-form上调度自定义操作

1 个答案: