从父组件或祖父母组件中清除React组件中的输入

Question

我的应用程序中有一个过滤器表单，它有正常的输入字段和日期范围输入(AirBnb的react dates插件(。在提交筛选表单时，我希望表单清除所有字段。但是，由于react dates组件是一个子组件，我一直找不到访问该组件中字段的方法。

到目前为止，我已经尝试在组件上放置一个"ref"，如下所示：

<DateRangePickerWrapper ref="daterange"/>

然后通过以下功能选择参考：

filterButton(data,e){
let refs = this.refs
for(const key in refs){
if(!(key === "daterange")){
refs[key].value = ""
}else{
console.log(this.refs["daterange"])
}
}
}

然而，我在日志中收到了一个"Connect"对象，而不是实际的组件，因为我使用的是Redux。：

Connect {props: {…}, context: {…}, refs: {…}, updater: {…}, version: 15, …}

我尝试将"forwardRef"选项添加到组件导出中，但是-我仍然收到Connect对象。。。

export default connect(mapStateToProps, { forwardRef: true})(DateRangePickerWrapper);

如果除了通过组件之外还有一种更简单的方法来重置输入，我非常乐意改为使用该方法。。

谢谢你抽出时间！

Answer 1

来自您在问题中链接到的react-datesREADME.md:

<DateRangePicker
startDate={this.state.startDate} // momentPropTypes.momentObj or null,
endDate={this.state.endDate} // momentPropTypes.momentObj or null,
// ... more props...
/>

道具startDate和endDate接受null作为值，这具有清除所选日期的效果。