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

Question

我的应用程序中有一个过滤器表单，它具有正常输入字段和日期范围输入（AirBnb 的 react-dates 插件）。在提交过滤器表单时，我希望表单清除所有字段。但是，我无法找到访问 react-dates 组件中的字段的方法，因为它是一个子组件。

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

    <DateRangePickerWrapper ref="daterange"/>

然后通过以下函数选择ref：

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 {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...
/>

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