带有用于用户输入的自定义输入的 react-datepicker 不起作用答案

【问题标题】：react-datepicker with custom input for user input not working带有用于用户输入的自定义输入的 react-datepicker 不起作用
【发布时间】：2019-06-15 07:01:25
【问题描述】：

有一个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，如下所示：

constructor(props){
    super(props)
}

static propTypes = {
    onClick: PropTypes.func,
    onChange: PropTypes.func,
    value: PropTypes.string,
    placeholderText: PropTypes.string
};

render() {
    return (
        <div>
        <FormGroup className="mb-0">
          <InputGroup>
            <Input
              className={this.props.className}
              placeholder={this.props.placeholder}
              onClick={this.props.onClick}
              value={this.props.value}
              onChange={this.props.onChange}
              type="input"
            />
            <InputGroupAddon addonType="prepend">
              <InputGroupText
                className="dateIconStyle"
                onClick={this.props.onClick}
              >
                <i className={"icon-calendar"} />
              </InputGroupText>
            </InputGroupAddon>
          </InputGroup>
        </FormGroup>
        </div>
      );
}

只要用户从日历中选择日期，一切都很好，当用户尝试输入日期时，它不起作用。当用户开始删除输入时，它无法正常工作。试了很多，花了将近一整天，还是找不到问题，我在github上找到了this issue，但是没有运气，是什么问题？

【问题讨论】：

您正在使用输入框进行日期输入。因此，使用有效的日期输入，它将像 datepicker 中的自定义组件一样工作。但是，当您尝试将日期编辑为文本时，它可能会在您继续编辑时变为无效日期。因此，这可能会在日期选择器中引发异常并且不起作用。
@Vrishank 我该怎么做才能让用户正确输入？
不确定您的具体情况，但您需要执行如下操作：当用户输入日期输入时，仅应在日期输入完成后进行验证，而不是在每次击键时进行.
@Vrishank 如果我删除cusotmInput 它可以正常工作，我认为这可能是因为customInput 上的某些东西

标签： reactjs input onchange react-datepicker

【解决方案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>
          );
    }
}

【讨论】：

【解决方案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>

【讨论】：