Как открыть DatePicker на нажатие кнопки или значок нажмите в реагировать JS

Question

Я использую этот указатель даты в своем демонстрационном приложении

https://www.npmjs.com/package/react-datepicker, но мой указатель даты открывается, когда я щелкаю поле ввода. мы можем открыть средство выбора даты, когда пользователь нажимает кнопку и значокна правой стороне вместо ввода нажмите?

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  openDatePicker = () => {};

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
        <button onClick={this.openDatePicker}>openDate</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

Answer 1

Да, его можно открыть, кроме щелчка по самому компоненту.Вы можете управлять им с помощью свойства open Datepicker.Вот модифицированная версия вашего кода:

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      datePickerIsOpen: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.openDatePicker = this.openDatePicker.bind(this)
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  openDatePicker() {
    this.setState({
      datePickerIsOpen: !this.state.datePickerIsOpen,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.openDatePicker}>openDate</button>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
          onClickOutside={this.openDatePicker}
          open={this.state.datePickerIsOpen}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

Как вы можете видеть, мы добавили состояние в класс Example, который управляет свойством open Datepicker.Я также добавил onClickOutside, который можно использовать для определения того, что должно произойти, если пользователь щелкнет вне средства выбора даты после его открытия.