编辑字段不起作用并使用 redux 存储管理表单值 - redux-form

IT技术 javascript reactjs redux react-redux redux-form
2021-05-16 02:48:26

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

我不知道 usingchange方法是使用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>

1个回答

我终于以这个解决方案结束:)。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>

其它你可能感兴趣的问题
上一篇AgGrid 自定义 html 拖动 下一篇创建 html 结构，每个 li 中只允许 3 个 div 元素。在 React + underscore.js