编辑字段不起作用&使用 redux store 管理表单值 - redux-form [英] Edit Field not working & Managing form values using redux store - redux-form

问题描述

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

I am using redux-form v6.7.0. I referred this link and tried to load data asynchronously on button click but it is not working as expected. I used change method in componentWillReceiveProps but after using I am unable to edit that Field.

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

I don't know using change method is the only and appropriate way of managing with redux-form. PFB the sample code snippet where I loaded personName using change method in componentWillReceiveProps and after that I am unable to edit that Field. For personAge, the Field is working fine as I didn't used change method for it.

此外，我想将所有更改的表单值与我的 redux 存储同步(意味着使用我的 redux 存储更新每个更改).

Also, I wanted to synchronize all changed form values with my redux store (means keep each and every change updated with my redux store).

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

Any help would be appreciated. Thanks in advance.

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

推荐答案

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

I finally ending with this solution:). PFB the code snippet.

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

这篇关于编辑字段不起作用&使用 redux store 管理表单值 - redux-form的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！