0

我的应用程序中有一个过滤器表单，它具有正常的输入字段和日期范围输入（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);

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

谢谢你的时间！

4

1 回答 1

1

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

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

propsstartDate和endDateacceptnull作为一个值，具有清除所选日期的效果。

于 2020-03-13T06:09:10.780 回答