Redux表单未重置字段

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表单导入重置并调度它。试试这个

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