从父组件或祖父母组件清除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"])

       }
    }
}

但是，由于我正在使用Redux，因此在登录时会收到一个“ Connect”对象，而不是实际的组件。：

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

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

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

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

感谢您的时间！

Answer 1

从您在问题中链接到的react-dates README.md：

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

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