[英]Redux-form 6.0+ change all field values
我试图在redux-form中更改多个值。 我将它们放在一个对象中,所以基本上我想用我的对象值覆盖redux-form状态值。 实现它的一种方法是运行this.props.reset()
然后为每个属性运行多个this.props.change()
事件。 它工作但它发送的事件太多而且很慢。 我尝试的第二件事是运行this.props.initialize(data,false)
,这可以工作,但验证不会重新运行,所以我可以轻松提交表单而无需验证。 有没有办法运行一个事件来覆盖我的对象的表单状态?
我很害怕这是不可能的。 我前段时间遇到同样的问题,并且以redux-form的形式阅读所有文档,我得出结论,你必须使用动作创建者。 要么改变自动填充。
如果您使用initialize,那么您正在初始化值,它意味着用于数据的异步初始化,因此,它不会像您所说的那样进行验证。
很久以前在以前的版本中,他们有一个“defaultValue”概念。 但他们删除了它。 如果你真的不需要进行最后一次更新,也许值得你检查一下是否会对你有所帮助。
注意
我建议你按照这个问题线程 。 他们在那里谈论它。
有可能的。 我通过Create-React-App文件结构使用Redux在React中实现了它。
使用stateProps / dispatchProps模式。
您应该已经知道要使用它的动作和减速器。 这是我最初用https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f开始的项目
我把它包含在内,这样当我使用减速器和动作等术语时,你就会知道我在说什么。
在你的动作/索引文件中
import makeAction from "./makeActionCreator";
const clearMultiplePropertiesInState = "clearMultiplePropertiesInState";
export default {
constants: {
clearMultiplePropertiesInState,
},
creators: {
clearMultiplePropertiesInState: makeAction(clearMultiplePropertiesInState
}
};
在你的redurs / {your-reducer} .js中
import actions from '../actions';
const { constants } = actions;
const INITIAL_STATE = {
name: "Dr Hibbert",
age: "40",
height: "180cm"
};
//#region const declarations
const { clearMultiplePropertiesInState } = constants;
//#endregion
export default function (state = INITIAL_STATE, action) {
switch (action.type) {
case clearMultiplePropertiesInState: {
var fields = action.data;
var theState = {
...state
};
for(var i = 0; i < fields.length; i++) {
theState[fields[i]] = "";
}
return theState;
}
default:
if (!action.type.includes('@@')) {
console.log(`No action for: ${action.type} type`);
}
return state;
}
}
因此,您要清除的三个项目是state.name,state.age和state.height
import React from "react";
import { connect } from "react-redux";
import { Form, Icon, Button, Modal } from "semantic-ui-react";
import actions from "common/actions";
const { creators } = actions;
const MyComponent = ({ stateProps, dispatchProps }) => {
return (
<React.Fragment>
<Button
disabled={disableOkButton}
onClick={() => {
dispatchProps.clearMultiplePropertiesInState(["name", "age", "height"]);
}}
primary
labelPosition='right'
icon='checkmark'
content="Create Club"
loading={stateProps.modalOkButtonLoading}
/>
</React.Fragment>
);
}
function mapStatetoProps(state) {
return {
stateProps: {
name: state.name,
age: state.age,
height: state.height
}
};
}
function mapDispatchToProps(dispatch) {
return {
dispatchProps: {
clearMultiplePropertiesInState: (fieldNames) => {
dispatch(creators.clearMultiplePropertiesInState(fieldNames));
}
}
};
}
export default connect(mapStatetoProps, mapDispatchToProps)(MyComponent);
正如我所说,你需要精通使用React和Redux来理解这一点,但它是可能的。 此示例显示我同时重置3个值。 所以成像传递新的价值......
我通常有一个changeSinglePropInState操作,我使用它(不包含在代码中),它传递fieldName和它想要在状态中更改的fieldValue,因为我不想为我的状态中的每个项目创建一个操作。
此外,如果你可以绕过它,这会改变状态内对象的一个属性
case addItemToWishList: {
return {
...state,
buyer: {
...state.buyer,
wishlist: action.data
}
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.