Reactjs 对用户输入无效的自定义输入使用react datepicker

有一个

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'
            />
        </>
    )
}

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上找到了，但是没有运气，这是什么

如果要对日期使用自定义组件，则需要以不同于日期选择器属性的方式管理自定义输入字段的所有状态。此外，仅当输入有效时，才需要将其设置为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;

import React，{Component}来自'React'；
从“./CustomCalendarComponent”导入CustomCalendarComponent；
从“react DatePicker”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
导入“/App.css”；
从“力矩”中导入力矩；
const momentDateFormat=“MM/DD/YYYY”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这个州={
dpDate:moment（）.toDate（），
ipDate:moment（）.format（momentDateFormat）
}
}
handleDPChange（val）{
this.setState（{dpDate:val，ipDate:moment（val）.format（momentDateFormat）}）；
}; 
handleIpChange（val）{
设d=力矩（val，momentDateFormat）；
如果（d.isValid（））{
this.setState（{dpDate:d.toDate（）}）；
}
this.setState（{ipDate:val}）；
}
render（）{
返回(
开始

this.handleDPChange（value）}
customInput={this.handleIpChange（val）}
/>}
日期格式={“MM/dd/yyyy”}
showMonthDropdown
ShowYear下拉列表
dropdownMode='select'
/>
);
}
}
导出默认应用程序；

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>
          );
    }
}

从“React”导入React；
导出默认类CustomCalendarComponent扩展React.Component{
render（）{
返回(


自定义日期{this.props.ipDate}


this.props.handleIpChange（e.target.value）}
type=“输入”
/>
);
}
}

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

<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>

您正在使用输入框输入日期。所以，使用有效的日期输入，它将像datepicker中的自定义组件一样工作。但是，当您试图将日期编辑为文本时，在继续编辑时，它可能会成为无效日期。因此，这可能会在日期选择器内引发异常，并且无法工作。@Vrishank我该怎么做才能让用户正确键入？不确定您的具体情况，但您需要这样的实现：当用户键入日期输入时，只有在日期输入完成后，才能对其进行验证，而不是在每次击键时进行验证。@Vrishank如果我删除

cusotmInput

它工作正常，我想可能是因为

customInput