Question

在问这个问题之前，我进行了一次Google搜索，但没有找到任何好的资源来仅通过Redux管理表单。所有示例都使用redux形式。这只是一种形式，我不想安装该库以仅在一种最小的小型形式上使用。

我无法使用本地状态，因为用户可以选择转到另一个屏幕，然后返回包含表单的屏幕，因此在某个时候可以将该组件卸载并再次安装，我希望它能够保持其状态。

这是我到目前为止拥有的组件以及我一直在研究的方式：

^.*\d{4}\s+[A-Z]+\s+\d{3}.+\n.*$

现在您可能会看到，我正在尝试将值发送到商店，如下所示：

import { compose } from 'redux';
import { connect } from 'react-redux';
import React from 'react';

import FormField from '../FormField/FormField';

import {
  startupThirdStepFormAction,
} from '../../pages/StartupApplication/actions/startupApplicationActions';

const StepThreeForm = ({
  startupThirdStepForm,
  startupThirdStepFormActionHandler,
 }) => (
    <>
      <Container>
        <Row>
          <Col>
            <Form>
              <FormField
                value={startupThirdStepForm.firstName}
                label="First Name"
                controlId="firstName"
                onChange={e =>
                  startupThirdStepFormActionHandler({
                    firstName: e.target.value,
                  })
                }
              />
              <FormField
                value={startupThirdStepForm.middleName}
                label="Middle Name"
                controlId="middleName"
                onChange={e =>
                  startupThirdStepFormActionHandler({
                    middleName: e.target.value,
                  })
                }
              />
            </Form>
          </Col>
        </Row>

      </Container>
    </>
);

export default compose(
  connect(
    store => ({
      startupThirdStepForm: store.startupApplicationReducer.startupThirdStepForm,
    }),
    dispatch => ({
      isStepDoneActionHandler: index => {
        dispatch(isStepDoneAction(index));
      },
      startupThirdStepFormActionHandler: form => {
        dispatch(startupThirdStepFormAction(form));
      },
    }),
  ),
)(StepThreeForm);

这是针对onChange={e => startupThirdStepFormActionHandler({ firstName: e.target.value, })字段的，但是当我对firstName字段执行相同的操作时，显然会清除middleName字段。

这是减速器：

firstName

动作：

const initialState = {
  startupThirdStepForm: {},
};

const handlers = {
  [ActionTypes.STARTUP_THIRD_STEP_FORM](state, action) {
    return {
      ...state,
      startupThirdStepForm: action.payload.startupThirdStepForm,
    };
  },
}

export default createReducer(initialState, handlers);

那我该怎么做才能保持表单字段的状态而不清理其他字段？

Answer 1

请尝试对减速器执行以下操作：

const handlers = {
    [ActionTypes.STARTUP_THIRD_STEP_FORM]: (state, action) {
        return {
            ...state,
            startupThirdStepForm: {
                // to preserve old state
                ...state.startupThirdStepForm,
                // to update with new data
                ...action.payload.startupThirdStepForm,
            },
        };
    },
}

Answer 2

一个快速的建议是创建状态的副本。为了方便您确定要更新的字段，可以在有效负载中添加glorot和initializer=tf.glorot_uniform_initializer。

name

如何仅使用Redux管理React表单？没有redux形式

2 个答案: