Question

我正在使用redux-form v6.7.0 。我引用了这个link并尝试在按钮单击时异步加载数据，但它没有按预期工作。我在change中使用了componentWillReceiveProps方法但在使用后我无法编辑Field。

我不知道使用change方法是使用redux-form进行管理的唯一且恰当的方法。 PFB是我在personName中使用change方法加载componentWillReceiveProps的示例代码段，之后我无法编辑Field。对于personAge，Field工作正常，因为我没有使用change方法。

此外，我希望将所有更改的表单值与我的redux商店同步（意味着使用我的redux商店更新每个更改）。

任何帮助将不胜感激。提前谢谢。

＆＃13;

/* 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"));

＆＃13;

<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>

＆＃13;

Answer 1

我终于以这个解决方案结束:)。 PFB代码片段。

＆＃13;

/* 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"));

＆＃13;

<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>

＆＃13;

编辑字段不起作用＆amp;使用redux store - redux-form管理表单值

1 个答案: