ответная дата-сборщик с пользовательским вводом для пользовательского ввода не работает - PullRequest
Новая
       22

ответная дата-сборщик с пользовательским вводом для пользовательского ввода не работает

0 голосов
/ 15 июня 2019

есть 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, но не повезло, что это?

1 Ответ

0 голосов
/ 18 июня 2019

Если вы хотите использовать пользовательский компонент для дат, вам нужно управлять всеми состояниями настраиваемого поля ввода иначе, чем в свойствах выбора даты. Кроме того, только когда ввод действителен, вам нужно установить его в 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>
          );
    }
}
...