Question

有一个// var objTimer: Timer() }，其使用的CustomCalendarComponent如下所示：

react-datepicker

它有一个constructor(props) { super(props) this.state = { start :new Date() } this.handleStartChange = this.handleStartChange.bind(this); } handleStartChange (start) { start = start || this.state.start; this.setState({ start }) }; render() { return( <> <span>Start</span> <DatePicker selected = {this.state.start} selectsStart startDate = {this.state.start} endDate = {this.state.end} onChange = {this.handleStartChange} customInput = { <CustomCalendarComponent />} dateFormat = "dd/MM/yyyy" openToDate = {this.state.start} showMonthDropdown showYearDropdown dropdownMode = 'select' /> </> ) }，如下所示：

customInput

只要用户从日历中选择日期，

一切都很好，当用户尝试键入日期时，它将不起作用。当用户开始删除输入时，它将无法正常工作。我尝试了很多，花了将近一整天，但找不到问题，我在github上发现了this issue，但是不走运，这是什么？

Answer 1

如果要将自定义组件用于日期，则需要与日期选择器属性不同地管理自定义输入字段的所有状态。同样，只有在输入有效时，您才需要将其设置为datepicker。工作代码类似于您的情况，如下所示：

App.js

import React, {Component} from 'react';
import CustomCalendarComponent from './CustomCalendarComponent';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import './App.css';
import moment from 'moment';

const momentDateFormat = "MM/DD/YYYY";

class App extends Component {
  constructor(props){
    super(props);
    this.state ={
      dpDate: moment().toDate(),
      ipDate: moment().format(momentDateFormat)
    }
  }

  handleDPChange (val) {
    this.setState({dpDate:val, ipDate:moment(val).format(momentDateFormat)});
  }; 

  handleIpChange(val){
    let d = moment(val, momentDateFormat);
    if(d.isValid()){
        this.setState({dpDate:d.toDate()});
    }
    this.setState({ipDate:val});
}

  render(){
    return (
    <>
            <span>Start</span><br/>
            <DatePicker
              selected={this.state.dpDate}
              onChange={value => this.handleDPChange(value)}
              customInput={ <CustomCalendarComponent
                ipDate={this.state.ipDate}
                handleIpChange={(val)=>this.handleIpChange(val)}
              />}
              dateFormat={"MM/dd/yyyy"}
              showMonthDropdown
              showYearDropdown
              dropdownMode = 'select'
            />
        </>
  );
    }
}

export default App;

CustomCalendarComponent.js

import React from 'react';
export default class CustomCalendarComponent extends React.Component{
    render() {
        return (
            <div>
                <br/>
                <span>CUSTOM DATE {this.props.ipDate}</span>
                <br/>
                <input
                    onClick={this.props.onClick}
                    value={this.props.ipDate}
                    onChange={(e)=>this.props.handleIpChange(e.target.value)}
                    type="input"
                />
            </div>
          );
    }
}

Answer 2

您应将所有道具传递给“自定义输入”，如下所示：

<FormGroup className="mb-0">
      <InputGroup>
        <Input
           otherprops...
          {...this.props}
        />
        <InputGroupAddon addonType="prepend">
          <InputGroupText
            className="dateIconStyle"
            onClick={this.props.onClick}
          >
            <i className={"icon-calendar"} />
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </FormGroup>

使用用户输入的自定义输入的react-datepicker无法正常工作

2 个答案: