我正在我的演示应用程序中使用这个datepicker
https://www.npmjs.com/package/react-datepicker但是我的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);
是的，除了单击组件本身之外，还可以使其打开。您可以使用DatePicker的open属性对其进行控制。以下是您的代码的修改版本：
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);
正如您所看到的，我们已经向示例类添加了一个状态，它控制DatePicker的open属性。我还添加了onClickOutter，它可以用来确定当datepicker打开后，如果用户单击datepicker之外的内容，应该发生什么。
您需要将按钮设置为customInput
import React from 'react'
const CustomInput = React.forwardRef((props,ref) => {
return (
<button onClick={props.onClick} ref={ref}>
{props.value || props.placeholder}
</button>
)
})
export default CustomInput;
然后在主组件中。这样做
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import CustomInput from "./CustomInput"
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
});
}
render() {
return (
<div>
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
customInput={<CustomInput />}
placeholderText="openDate"
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
