Reactjs 值已重置，但输入未重置？

我正在使用

react day picker

并正确重置所选日期，但不确定如何清除day pickerInput占位符

示例：我选择一个日期范围，然后单击“重置”。结果会更改，但旧日期仍会显示在输入中。有什么想法吗

代码：

按钮：

// Custom Clear Refinements Button - clears filters and day picker
const ClearRefinements = ({ items, refine }) => (
  <button className="mt-3 clear-button" onClick={() => {refine(items); handleResetClick()}}>
    Clear all filters
  </button>
);

const CustomClearRefinements = connectCurrentRefinements(ClearRefinements);

//自定义清除优化按钮-清除过滤器和日期选择器
常量ClearRefinements=（{items，refine}）=>(
{优化（项目）；handleResetClick（）}>
清除所有过滤器
);
const CustomClearRefinements=连接当前优化（ClearRefinements）；

从“React”导入React，{Component}；
输入“日期fns”；
从“时刻”中导入时刻；
导入“时刻时区”；
从“react day PickerInput/DayPickerInput”导入DayPickerInput；
从“反应日选择器/时刻”导入{formatDate，parseDate}；
导入“时刻/地点/id”；
从“反应日选择器/时刻”导入MomentLocaleUtils；
从'react redux'导入{connect}；
从“../../actions/saldosAction”导入{setDateAction}；
常量限制=（事件）=>{
//e.预防违约（）；
如果（event.getDate（）==新日期（）.getDate（）&&event.getMonth（）==新日期（）.getMonth（）&&event.getFullYear（）==新日期（）.getFullYear（））{
返回新日期（）；
}
var day=event.getDate（）；
var month=event.getMonth（）；
var year=event.getFullYear（）；
变量D=`${month+1}，${day}，${year}`；
var toDate=新日期（D）
toDate.setDate（toDate.getDate（）+29）；
//log（“限制日期=>截止日期=>”，toDate）
如果（toDate.getFullYear（）==新日期（）.getFullYear（））{
如果（toDate.getMonth（）>new Date（）.getMonth（））返回新日期（）；
如果（toDate.getMonth（）==新日期（）.getMonth（）&&toDate.getDate（）>新日期（）.getDate（））返回新日期（）；
}
//现在考虑到“年”<“今天.年”
回到今天；
}
类DatePickerComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
发件人：未定义，
至：未定义
}
this.handleFromChange=this.handleFromChange.bind（this）；
this.handleToChange=this.handleToChange.bind（this）；
this.clearDate=this.clearDate.bind（this）；
};
clearDate（）{
这是我的国家({
发件人：未定义，
致：未定义，
},()=>{
var fromExist=document.getElementById（“从日期”）；
var toExist=document.getElementById（“今天”）；
if（fromExist&&toExist）{
document.getElementById（“起始日期”）.value=“”；
document.getElementById（“今日”）.value=“”；
}      
})       
}
showFromMonth（）{
const{from，to}=this.state；
如果（！从）{
返回；
}
如果（瞬间（到）.diff（瞬间（从），“月”）<2）{
this.to.getDayPicker（）.showMonth（从）；
}
}
handleFromChange（来自）{
//更改起始日期并聚焦“至”输入字段
this.setState（{from}）；
}
手摇开关（至）{
this.setState（{to}，this.showFromMonth）；
const from=this.state.from；
this.props.setDateAction（{from，to}）；
}
render（）{
const{from，to}=this.state；
const date=this.props.dateprops；
常量修饰符={start:from，end:to}；
if（（date.from===未定义和&date.to==未定义）和&（from！==未定义和&to！==未定义））{
这是clearDate（）
}
返回(
此.to.getInput（）.focus（），
localeUtils:MomentLocaleUtils，locale:“id”
}}
输入道具={{
id:“从一天开始”，
样式：{width:'160px'}
}}
onDayChange={this.handleFromChange}
/>{' '}
-{' '}
（this.to=el）}
值={to}
占位符=“到”
format=“LL”
formatDate={formatDate}
parseDate={parseDate}
采摘植物={{
selectedDays:[from，{from，to}]，
disabledDays:[{before:from，after:to？to:（from===未定义的新日期（）：limit（from））}]，
修饰语，
月份：从，
fromMonth:from，
月数：1，
localeUtils:MomentLocaleUtils，locale:“id”
}}
输入道具={{
id:“今天”，
样式：{width:'160px'}
}}
onDayChange={this.handleToChange}
/>
)
}
}
导出默认连接（null，{setDateAction}）（DatePickerComponent）；

当我点击clear按钮时，clear date按钮位于其他组件中，它通过

setDateAction（未定义，未定义）

在减速器中进行更改。 因此在render（）方法中

const date=this.props.dateprops和我用来调用clear（）方法的if（）块

在这里，我使用vanila JS来清除日期，因为我也面临同样的问题。
您需要将id/类添加到日期组件的输入中，或者您也可以使用类名=>“InputFromTo”，但这将变得太长，无法获取子节点数据

在
clearDate
函数中，您可以看到我检查并清除了值。
所以，试试这个方法，看看它是否运行

限制函数用于设置从“React”开始最多30天的范围。
import React，{Component}；
输入“日期fns”；
从“时刻”中导入时刻；
我
function handleResetClick() {
  setState({
    from: undefined,
    to: undefined,
  });
}

// Custom Clear Refinements Button - clears filters and day picker
const ClearRefinements = ({ items, refine }) => (
  <button className="mt-3 clear-button" onClick={() => {refine(items); handleResetClick()}}>
    Clear all filters
  </button>
);

const CustomClearRefinements = connectCurrentRefinements(ClearRefinements);

import React, { Component } from 'react';
import 'date-fns';
import moment from "moment";
import "moment-timezone";
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import "moment/locale/id";
import MomentLocaleUtils from 'react-day-picker/moment';
import { connect } from 'react-redux';

import { setDateAction } from '../../actions/saldosAction';

const limit = (event) => {
    // e.preventDefault();
    if( event.getDate() === new Date().getDate() && event.getMonth() === new Date().getMonth() && event.getFullYear() === new Date().getFullYear() ){
      return new Date();
    }

      var day = event.getDate();
      var month = event.getMonth();
      var year = event.getFullYear();
      var D = `${month+1},${day},${year}`;
      var toDate = new Date(D)
      toDate.setDate(toDate.getDate()+29);

    //   console.log("Limit date => To date=>",toDate)

      if(toDate.getFullYear() === new Date().getFullYear()){
        if( toDate.getMonth() > new Date().getMonth() )  return new Date();
        if( toDate.getMonth() === new Date().getMonth() && toDate.getDate() > new Date().getDate() ) return new Date();
      }
      // now considering that the "year" < "toDate.year"
      return toDate;
  }


class DatePickerComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            from: undefined,
            to: undefined
        }
        this.handleFromChange = this.handleFromChange.bind(this);
        this.handleToChange = this.handleToChange.bind(this);
        this.clearDate = this.clearDate.bind(this);
    };

    clearDate() {
        this.setState({
            from: undefined,
            to: undefined,
        },()=>{
                var fromExist = document.getElementById("from-day") ;
                var toExist = document.getElementById("to-day");
                if (fromExist && toExist ){
                    document.getElementById("from-day").value = "";
                    document.getElementById("to-day").value = "";
                }      
        })       
    }

    showFromMonth() {
        const { from, to } = this.state;
        if (!from) {
            return;
        }
        if (moment(to).diff(moment(from), 'months') < 2) {
            this.to.getDayPicker().showMonth(from);
        }
    }

    handleFromChange(from) {
        // Change the from date and focus the "to" input field
        this.setState({ from });
    }

    handleToChange(to) {
        this.setState({ to }, this.showFromMonth);
        const from = this.state.from;
        this.props.setDateAction({from,to});
    }


    render() {
        const { from, to } = this.state;
        const date = this.props.dateprops;
        const modifiers = { start: from, end: to };

        if((date.from === undefined && date.to === undefined) && (from !== undefined && to !== undefined) ){
            this.clearDate()
        }

        return (
            <div className="InputFromTo">
                <DayPickerInput
                    value={from}
                    placeholder="From"
                    format="LL"
                    formatDate={formatDate}
                    parseDate={parseDate}
                    fixedWeeks={4}
                    dayPickerProps={{
                        selectedDays: [from, { from, to }],
                        disabledDays: [{ after: to ? to : new Date(moment()) , before: from ? from : '' }],
                        toMonth: to,
                        modifiers,
                        numberOfMonths: 1,
                        onDayClick: () => this.to.getInput().focus(),
                        localeUtils: MomentLocaleUtils, locale: "id"
                    }}
                    inputProps={{
                        id :"from-day",
                        style: { width: '160px' }
                    }}

                    onDayChange={this.handleFromChange}
                />{' '}
                -{' '}
                <span className="InputFromTo-to">
                    <DayPickerInput
                        ref={el => (this.to = el)}
                        value={to}
                        placeholder="To"
                        format="LL"
                        formatDate={formatDate}
                        parseDate={parseDate}
                        dayPickerProps={{
                            selectedDays: [from, { from, to }],
                            disabledDays: [{ before: from , after: to ? to : ( from === undefined ? new Date() : limit(from) ) }],
                            modifiers,
                            month: from,
                            fromMonth: from,
                            numberOfMonths: 1,
                            localeUtils: MomentLocaleUtils, locale: "id"
                        }}
                        inputProps={{
                            id: "to-day",
                            style: { width: '160px' }
                        }}
                        onDayChange={this.handleToChange}
                    />
                </span>

            </div>
        )
    }
}


export default connect(null,{setDateAction})(DatePickerComponent);