代码之家 › 专栏 › 技术社区 › Leff

Redux表单不重置字段

redux-form reactjs

Leff · 技术社区 · 6 年前

我有一个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,
  );
}

但是,这不起作用,我不会重置任何字段,如果我隐藏并再次显示这些字段,我拥有与隐藏之前相同的值。我该怎么做?

1 回复 | 直到 6 年前

Harikrishnan 6 年前

您需要从redux表单导入reset并发送它。试试这个

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

推荐文章