1

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

4

2 回答 2

1

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

应用程序.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>
          );
    }
}
于 2019-06-18T08:38:02.657 回答
0

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

<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>
于 2020-03-24T12:28:38.100 回答