从父组件或祖父组件清除 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" 选项添加到组件导出，但是 - 我仍然收到连接对象...

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作为一个值，具有清除所选日期的作用。

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

Clearing input within React Component from a parent or grandparent Component

javascript

components

reactjs

redux

react-dates