Question

我在我的表单中使用了redux-form Field的多个实例，并使用redux-form-material-ui的TextField作为可渲染组件：

<Field
     component={TextField}
     floatingLabelText='Title:'
     name='title'
/>

当表单所在的组件使用reduxForm（）包装时，我们会在此组件中获得props.pristine，props.dirty等。

但是，我想在另一个非reduxForm组件或Redux状态中执行一些操作，具体取决于pristine的值，但我无法执行此操作。

我尝试将它作为道具传递给Field：

<Field
    component={TextField}
    floatingLabelText='Title:'
    name='title'
    pristine={props.pristine}
/>

但是pristine属性仍然不会作为state.form.formName内的道具，也不会作为道具出现在state.form.formName.registeredFields.title内：

问题：
有没有办法让我的表单的pristine属性在另一个组件内或在redux状态内？

Answer 1

更新：升级到7.4.2。解决了问题！

import { connect } from 'react-redux';
import { isPristine } from 'redux-form'

您需要做的：连接到redux-form-state并访问它

const mapStateToProps = state => ({
  isPristine: isPristine('yourFormName')(state), // Checks whole form
  isPristine: isPristine('yourFormName')(state, ["fieldName"]), // Checks particular field
}); connect(mapStateToProps)

您可以使用this.props.isDirty访问它，并将其传递给所需的组件。

Answer 2

从中间件处理这个可能是最简单的实现，即检查表单之间的状态，检查form.config.values和form.config.initialValues，当存在redux-form更改时。

const formMiddleware = () => store => next => action => {
  const state = store.getState()
  switch(action.type) {
    case '@@redux-form/CHANGE':
      store.dispatch({ type: UPDATE_OTHER_FORM, message: Object.is(state.form.config.values, state.form.config.initial) });
      break;
  }
  next(action)
}

另一种选择（基于用例）是通过pristine状态处理你的表单，并根据prop的状态更改调用，并传递它：

<Button
  btnName={pristine ? "Action1" : "Action2"}
  type="submit"
  action={props.handleSubmit(values => {
    onSubmit(
      pristine ?
      {
        ...values,
        call: 'action1'
      } : {
        ...values,
        call: 'action2'
      }
    )
  })}
/>

然后在您的根组件中，您可以将一个方法（在本例中为“handleSubmit”）传递给表单的handleSubmit prop，然后它将监视传入的表单提交，以根据值确定要调用的操作。 e.g。

handleSubmit = (values) => {
  if(values.call === 'action1') { 
    this.props.actions.action1(values);
  } else if(values.call === 'action2') {
    this.props.actions.action2(values);
  }
}

希望这对您的特定实施有所帮助，即使您正在寻找将原始状态置于表单之外的方法。您也可以将州通过这些与其他形式联系起来，但是当我去年调查时，将状态推到表单之外是不可能的。

如何从Redux状态内部访问reduxForm的pristine prop？

2 个答案: