Question

我想解释一下我到目前为止所做的事情

我已使用以下表单参数创建了动态表单
```
<PrintingForm
    img={img}
    form={img.id}
    onChangeHandler={this.handlePrintFrame}
/>
```
这已经创建了带有动态ID归档的表单

以下是PrintingForm组件的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { TextField } from '@material-ui/core';

const renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => (
  <TextField
    label={label}
    type="number"
    InputLabelProps={{
      shrink: true,
    }}
    margin="normal"
    variant="outlined"
    errorText={touched && error}
    {...input}
    {...custom}
  />
);
class PrintingForm extends Component {
  onChangeHandler = (event, img) => {
    this.props.onChangeHandler(
      img.id,
      img.actualFile,
      img.imgUrl,
      'p4by6',
      event
    );
  };
  render() {
    const {
      img,
      initialValues,
    } = this.props;

    return (
      <form>
        <Field
          name="p4by6"
          component={renderTextField}
          label="4*6"
          img={img}
          onChange={e => this.onChangeHandler(e, img)}
        />
      </form>
    );
  }
}
PrintingForm = reduxForm({})(PrintingForm);
PrintingForm = connect(state => ({
  initialValues: state.form,
}))(PrintingForm);

export default PrintingForm;

对于onChange onBlur和其他redux形式的事件它工作正常。现在，我想在随后导航此组件时获取渲染的初始值。

Answer 1

我没有得到您真正需要的东西，但是我想以下可能会有所帮助：

在组件中：

const mapStateToProps = state => {
  return {
    primaryName: state.form.userBlockForm.values.primaryName,
    secondaryName: state.form.userBlockForm.values.secondaryName,
    blockColor: state.form.userBlockForm.values.blockColor
  }
}

export default reduxForm(
  {
    form: 'userBlockForm',
    initialValues: {
      primaryName: '',
      secondaryName: '',
      blockColor: '#FFBC0A',
    },
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true
  }
)(connect(
  mapStateToProps,
  {
    handleUserBlockDialogClose,
    handleUserBlockCreate
  }
)(UserBlockDialog));

使用redux中间件：

const reduxFormMiddleware = store => next => action => {
  console.log('redux-form-middleware');
  const actionType = action.type.split('/');
  if (actionType[0] === '@@redux-form') {
    switch(actionType[1]) {
      case 'INITIALIZE': {
        switch(action.meta.form) {
          case 'userBlockForm': {
            const block = store.getState().controls.userBlockSavingAs;
            if (block) {
              action.meta.keepDirty = false;
              action.payload = {
                primaryName: block.primaryName,
                secondaryName: block.secondaryName,
                blockColor: block.color
              }
            } else {
              const values = store.getState().form.userBlockForm.values;
              if (values) {
                action.payload = {
                  primaryName: values.primaryName,
                  secondaryName: values.secondaryName,
                  blockColor: values.blockColor
                }
              }
            }
            next(action);
            break;           
          }
          case 'arrayForm': {
            next(action);
            break;
          }

          default:
            next(action);
        }
      }

      default:
        next(action);
    }
  }
  next(action);
}

export default reduxFormMiddleware;

如何使用动态命名形式从redux-fom获取initialValue

1 个答案: