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

发布时间：2020-12-15 16:20:51 所属栏目：百科来源：网络整理

导读：给定一个自定义组件： 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 {..

给定一个自定义组件：

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-form Field组件中

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

我希望当select选择触发“onChange”事件时,除了Redux-form操作之外还会调度自定义操作(AKA @@ redux-form / change)

我怎么能做到这一点？

我尝试通过props传递函数来调用并在< select>上设置onChange处理程序. tag但是这会覆盖redux-form onChange.

任何帮助赞赏！

解决方法

您需要在自己的自定义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)
}} />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!