我正在使用redux-form v6.7.0 。我引用了这个link并尝试在按钮单击时异步加载数据，但它没有按预期工作。我在change中使用了componentWillReceiveProps方法但在使用后我无法编辑Field。
我不知道使用change方法是使用redux-form进行管理的唯一且恰当的方法。 PFB是我在personName中使用change方法加载componentWillReceiveProps的示例代码段，之后我无法编辑Field。对于personAge，Field工作正常，因为我没有使用change方法。
此外，我希望将所有更改的表单值与我的redux商店同步（意味着使用我的redux商店更新每个更改）。
任何帮助将不胜感激。提前谢谢。
/* reducers should always maintain immutability */
function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
switch (action.type) {
case "SAVE_PERSON_DATA":
return Object.assign({}, state, action.payload);
default:
return state;
}
}
/* save person data action */
var savePersonData = (data) => {
return {
type: "SAVE_PERSON_DATA",
payload: data
};
};
/* form sample component */
class FormSample extends React.Component {
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
//console.log(nextProps);
const { change } = this.props;
//debugger;
if(nextProps.initialValues) {
change("personName", nextProps.initialValues.personName);
//change("personAge", nextProps.initialValues.personAge);
}
}
loadPersonData() {
const { initialize, savePersonData } = this.props;
var personInfo = {
personName: "Abraham",
personAge: 21
};
savePersonData(personInfo);
}
render() {
return (
<form>
<ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
<ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
<button type="button" onClick={() => this.loadPersonData()}>Load</button>
<h5>Values:</h5>{JSON.stringify(this.props.formValues)}
</form>
);
}
}
FormSample = ReduxForm.reduxForm({
form: "FormSample", // a unique identifier for this form
})(FormSample);
const selector = ReduxForm.formValueSelector("FormSample");
function mapStateToProps(state) {
const { personInfo } = state;
return {
initialValues: personInfo,
formValues: selector(state, "personName", "personAge")
};
}
function mapDispatchToProps(dispatch) {
return Redux.bindActionCreators({
savePersonData
}, dispatch);
}
FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);
const allReducers = Redux.combineReducers({
form: ReduxForm.reducer,
personInfo: PersonInfoReducer
});
const store = Redux.createStore(allReducers);
ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>
<div id="root"></div>
答案 0 :(得分：0)
我终于以这个解决方案结束:)。 PFB代码片段。
/* form sample component */
class FormSample extends React.Component {
componentWillReceiveProps(nextProps) {
//const { change, initialize } = this.props;
}
loadPersonData() {
const { initialize, savePersonData } = this.props;
var personInfo = {
personName: "Abraham",
personAge: 21
};
savePersonData(personInfo);
}
loadAnotherData() {
const { savePersonData } = this.props;
var personInfo = {
personName: "Gnanasingh",
personAge: 23
};
savePersonData(personInfo);
}
submit() {
const { formValues, savePersonData } = this.props;
savePersonData(formValues);
}
render() {
const { formValues, personInfo } = this.props;
return (
<form>
<ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
<ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
<button type="button" onClick={() => this.loadPersonData()}>Load</button>
<button type="button" onClick={() => this.loadAnotherData()}>Load Another</button>
<button type="button" onClick={() => this.submit()}>Submit</button>
<h5>Form Values:</h5>{JSON.stringify(formValues, null, 2)}
<h5>Store Values:</h5>{JSON.stringify(personInfo, null, 2)}
</form>
);
}
}
FormSample = ReduxForm.reduxForm({
form: "FormSample", // a unique identifier for this form
enableReinitialize: true
})(FormSample);
const selector = ReduxForm.formValueSelector("FormSample");
function mapStateToProps(state) {
const { personInfo } = state;
return {
initialValues: personInfo,
formValues: selector(state, "personName", "personAge"),
personInfo
};
}
function mapDispatchToProps(dispatch) {
return Redux.bindActionCreators({
savePersonData
}, dispatch);
}
FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);
/* reducer should always maintain immutability */
function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
switch (action.type) {
case "SAVE_PERSON_DATA":
debugger;
return Object.assign({}, state, action.payload);
default:
return state;
}
}
/* save person data action */
var savePersonData = (data) => {
return {
type: "SAVE_PERSON_DATA",
payload: data
};
};
const allReducers = Redux.combineReducers({
form: ReduxForm.reducer,
personInfo: PersonInfoReducer
});
const store = Redux.createStore(allReducers);
ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>
<div id="root"></div>