从按月搜索更改为今天的日期时，日期选择器按钮禁用

Question

当我选择按月搜索并选择随机月份时，我遇到了日期选择器问题，该按钮将能够单击，但是当我将其更改为今天的日期时，该按钮将被禁用。但是，如果您选择另一天并选择回到今天的日期，则该按钮将再次可用。

这是我的日期选择器的代码库：

        <DatePicker
          customInput={
            <React.Fragment>
              <input
                tabIndex={this.props.tabIndex}
                className="exact-date-input"
                placeholder={this.props.placeholder}
                autoComplete="off"
                type="text"
                maxLength={10}
                id="date-input"
                aria-label={ariaLabel}
                value={this.state.inputValue}
                onKeyDown={this.onKeyDownDateType}
                onClick={()=>this.openOrCloseDatePicker(true, this.state.error)}
                onFocus={()=>this.openOrCloseDatePicker(true, this.state.error)}
                onBlur={()=>this.emptyIfError(this.state.error)}
              />
            </React.Fragment>
          }
          openToDate={this.openToDate(this.props.value)}
          tabIndex={-1}
          selected={this.openToDate(this.props.value)}
          customInputRef="dateInput"
          autoComplete="off"
          id={this.props.id}
          onChange={this.handleInput}
          required={this.props.required}
          minDate={moment(today).toDate()}
          maxDate={moment(endRange).toDate()}
          open={this.state.datePickerIsOpen}
          onClickOutside={()=>this.openOrCloseDatePicker(false, this.state.error)}
        />

这是我的按钮：

            <button className={(validForm || !hasAnyContractSelected) ? "form-action-button mv-button primary disabled" : "form-action-button mv-button primary"} tabIndex={7} disabled={validForm || !hasAnyContractSelected} type="button" onClick={() => {this.onSubmit()}}>
              <span className="search-carat">{localize('static.content.search')}</span>
            </button>

有人知道我为什么会收到此错误吗？我该如何解决？

这是搜索按钮可以点击的照片：

这里不能：

更新的切换按钮：

  <div className="mv-toggle-inner" style={{ position: "relative" }} tabIndex={this.props.tabIndex} onKeyDown={this.toggleOnSpace}>
    <Toggle
      icons={false}
      name={this.props.name}
      id={this.props.name}
      checked={this.props.checked}
      onChange={this.props.onChange}
      tabIndex={-1}
    />

新增onChange功能：

  toggleOnSpace(event: React.KeyboardEvent<HTMLElement>) {
    if (event.keyCode == 32) {
      let newEvent = {
        target: {
          name: this.props.name,
          type: "checkbox",
          checked: !this.props.checked,
        },
      };
      this.props.onChange(newEvent);
      event.preventDefault();
    }
  }

更新并添加了validForm：

let validForm = !(
  this.validate(this.formRequirements, this.props.form).length === 0
) || !this.props.criteria.enableOwnerSearchAvailability;

Answer 1

必须发布作为答案，因为我没有足够的积分来发表评论。

我想在你的按钮上了解这个：

disabled={validForm || !hasAnyContractSelected}

我认为一旦你从月份切换到实际日期就会设置validForm，因为选择月份无效，然后选择日期使其有效