Question

我有一个redux表单，在其中单击复选框时，将显示或隐藏该表单的一部分。在显示或隐藏表单时，我也想重置字段，但这似乎不起作用。这是复选框字段：

<CheckboxField
  key="willUseManuelLetter"
  name="willUseManuelLetter"
  label={{ id: 'HandlingForm.willUseManuelLetter' }}
  onChange={this.onToggle}
  readOnly={readOnly}
/>

这是我根据复选框字段的状态显示或隐藏的字段：

<TextAreaField
  name="summary"
  label={{ id: 'HandlingForm.Summary' }}
  maxLength={200}
  rows={1}
  readOnly={readOnly}
  className={styles.smallTextArea}
/>

<TextAreaField
  name="longText"
  label={{ id: 'HandlingForm.LongText' }}
  maxLength={5000}
  readOnly={readOnly}
/>

在onToggle函数中，我试图重置如下字段：

onToggle() {
  this.setState({
    willUseManuelLetter: !this.state.willUseManuelLetter,
  });

  const { handlingFormPrefix} = this.props;

  this.props.reduxFormChange(
    `${handlingFormPrefix}.HandlingForm`, 'summary',
    undefined,
  );

  this.props.reduxFormChange(
    `${handlingFormPrefix}.HandlingForm`, 'longText',
    undefined,
  );
}

但是，这不起作用，我没有重置任何字段，如果我隐藏并再次显示这些字段，则我具有与隐藏它之前相同的值。我该怎么办？

Answer 1

您需要从redux-form导入reset并将其分派。试试这个

import { reset } from 'redux-form';
 .....
onToggle() {
  this.setState({
    willUseManuelLetter: !this.state.willUseManuelLetter,
  });
      dispatch(reset('formName'));
  }

Redux表单未重置字段

1 个答案: