从父组件或祖父组件中清除 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”对象而不是实际的组件。：

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