[英]Clearing input within React Component from a parent or grandparent Component
I'm have a filter form within my app that has normal input fields as well as a date range input (AirBnb's react-dates plugin).我的应用程序中有一个过滤器表单,它具有普通输入字段和日期范围输入(AirBnb 的react-dates插件)。 On submitting the filter form, I'd like the form to clear all fields.
在提交过滤器表单时,我希望表单清除所有字段。 However, I haven't been able to find a way to access the fields within the react-dates component, since it is a child component.
但是,我无法找到访问 react-dates 组件中字段的方法,因为它是一个子组件。
So far, I have tried placing a "ref" on the Component as follows:到目前为止,我已经尝试在组件上放置一个“ref”,如下所示:
<DateRangePickerWrapper ref="daterange"/>
And then selecting the ref through the following function:然后通过以下函数选择 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"])
}
}
}
However- I receive a "Connect" object upon log instead of the actual Component since I am using Redux.:但是 - 因为我使用的是 Redux,所以我在登录时收到一个“Connect”对象而不是实际的组件。:
Connect {props: {…}, context: {…}, refs: {…}, updater: {…}, version: 15, …}
I tried adding the "forwardRef" option to the Component export, however- I still receive the Connect object...我尝试将“forwardRef”选项添加到组件导出中,但是 - 我仍然收到 Connect 对象...
export default connect(mapStateToProps, { forwardRef: true})(DateRangePickerWrapper);
If there is an easier way to reset the input besides going through the Components, I am more than happy to change to that method instead..如果除了通过组件之外还有更简单的方法来重置输入,我很乐意改为使用该方法。
Thanks for your time!谢谢你的时间!
From the react-dates
README.md that you linked to in your question:从您在问题中链接到的
react-dates
README.md :
<DateRangePicker
startDate={this.state.startDate} // momentPropTypes.momentObj or null,
endDate={this.state.endDate} // momentPropTypes.momentObj or null,
// ... more props...
/>
The props startDate
and endDate
accept null
as a value, which has the effect of clearing the selected dates.道具
startDate
和endDate
接受null
作为值,具有清除所选日期的效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.