代码之家 › 专栏 › 技术社区 › 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 回复 | 直到 5 年前

Harikrishnan 6 年前

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

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

推荐文章

daminufe · 多个验证函数被视为或,而不是和

6 年前

D2DN · 使用Redux表单验证字段

6 年前

obsidian · redux表单动态类别

6 年前

Lex V · 在reactjs中放置页眉和页脚标记的位置

6 年前

Lex V · 将表单中提交的数据与reactjs中json文件中的数据进行比较

6 年前

Janak Patel · React redux表单,React select

6 年前

Arian · React Dropzone+Redux表单验证不起作用

6 年前

D2DN · 如何将redux form的formValueSelector方法与自定义组件一起使用以显示另一个组件

6 年前

Shawn Matthews · 监视变量的更改和更新状态

6 年前

gia · 具有分叉步骤的ReduxForm向导

6 年前