Я просто пытаюсь обновить заполнитель раскрывающегося списка onMouseOver Я пытался сделать это при смене дескриптора, но для этого нужно было дважды щелкнуть мышью, поэтому лучше всего было сделать это при наведении мыши. Проблема, которую я получаю, состоит в том, что она вызывает неопределенный или вообще не вызывает console.log. Я хочу, чтобы он изменил отображаемый заполнитель. Вот мой кодИ коды и поле для простоты ответа https://codesandbox.io/s/gotrax-daterange-v3-5t0ny?fontsize=14
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Header, Menu, Dropdown, Icon, Button } from "semantic-ui-react";
import moment from "moment";
import Helmet from "react-helmet";
import DayPicker, { DateUtils } from "react-day-picker";
import "react-day-picker/lib/style.css";
import "semantic-ui/dist/semantic.min.css";
import DateRange from "./DateRange";
export default class DatePicker extends Component {
constructor(props) {
super(props);
this.state = {
date: "",
placeholder: "Pick a Date",
wasSubmitted: false,
displayCustomRange: true,
customRange: null
};
this.handleDayClick = this.handleDayClick.bind(this);
this.handleResetClick = this.handleResetClick.bind(this);
this.handlecustomRange = this.handlecustomRange.bind(this);
}
// this is the logic for the react day picker component
getInitialState() {
return {
from: undefined,
to: undefined
};
}
handleDayClick(day) {
const range = DateUtils.addDayToRange(day, this.state);
this.setState(range);
}
handleResetClick() {
this.setState(this.getInitialState());
}
//This is our component logic for the date
handleSubmit = event => {
console.log(this.state.date);
event.preventDefault();
this.setState({ wasSubmitted: true });
};
handleChange = (e, d) => {
e.preventDefault();
e.persist();
this.setState({
date: d.value,
placeholder: this.state.date.text
});
if (this.state.displayCustomRange === false) {
this.setState({
customRange: null,
displayCustomRange: !this.state.displayCustomRange
});
}
};
updateCustomRange(range) {
console.log(range);
this.setState({
date: {
start: moment(range.from).format("YYYY-MM-DD"),
end: moment(range.to).format("YYYY-MM-DD")
}
});
if (range.to !== undefined) {
this.setState({
customRange: null,
displayCustomRange: !this.state.displayCustomRange
});
}
console.log(this.state.date);
}
//Custom Range
handlecustomRange() {
this.setState({
displayCustomRange: !this.state.displayCustomRange
});
if (this.state.displayCustomRange) {
this.setState({
customRange: (
<DateRange updateParent={this.updateCustomRange.bind(this)} />
)
});
} else {
this.setState({
customRange: null
});
}
console.log(this.state.customRange);
}
//onHover
onHover() {
this.setState({placeholder: this.state.value.key})
console.log(this.state.value.text);
}
render() {
const { date, wasSubmitted } = this.state;
return (
<div>
<div>
<Menu secondary borderless={true} fluid={true}>
<Menu.Item>
<Header>Date Range:</Header>
</Menu.Item>
<Menu.Item className="width15em">
<Icon name="calendar" />
<Dropdown placeholder={this.state.placeholder}>
<Dropdown.Menu>
<Dropdown.Item
text="Today"
value={{
key: "Today",
text: "Today",
start: moment().format("YYYY-MM-DD"),
end: moment().format("YYYY-MM-DD")
}}
onClick={this.handleChange}
onMouseOver={this.onHover.bind(this)}
/>
<Dropdown.Item
text="Yesterday"
value={{
key: "Yesterday",
text: "Yesterday",
start: moment()
.subtract(1, "d")
.format("YYYY-MM-DD"),
end: moment()
.subtract(1, "d")
.format("YYYY-MM-DD")
}}
onClick={this.handleChange}
onMouseOver={this.onHover.bind(this)}
/>
<Dropdown.Item
text="Last 7 Days"
value={{
key: "Last 7 Days",
text: "Last 7 Days",
start: moment()
.subtract(7, "d")
.format("YYYY-MM-DD"),
end: moment().format("YYYY-MM-DD")
}}
onClick={this.handleChange}
onMouseOver={this.onHover.bind(this)}
/>
<Dropdown.Item
text="Last 30 Days"
value={{
key: "Last 30 Days",
text: "Last 30 Days",
start: moment()
.subtract(30, "d")
.format("YYYY-MM-DD"),
end: moment().format("YYYY-MM-DD")
}}
onClick={this.handleChange}
onMouseOver={this.onHover.bind(this)}
/>
<Dropdown.Item
text="This Month"
value={{
key: "This Month",
text: "This Month",
start: moment()
.startOf("month")
.format("YYYY-MM-DD"),
end: moment().format("YYYY-MM-DD")
}}
onClick={this.handleChange}
onMouseOver={this.onHover.bind(this)}
/>
<Dropdown.Item
text="Last Month"
value={{
key: "Last Month",
text: "Last Month",
start: moment()
.subtract(1, "month")
.startOf("month")
.format("YYYY-MM-DD"),
end: moment()
.subtract(1, "month")
.endOf("month")
.format("YYYY-MM-DD")
}}
onClick={this.handleChange}
onMouseOver={this.onHover.bind(this)}
/>
<Dropdown.Item
text="Custom Range"
onClick={this.handlecustomRange}
onMouseOver={this.onHover.bind(this)}
/>
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
<Menu.Menu position="right" borderless="true">
<Menu.Item>
<form onSubmit={this.handleSubmit}>
<Button
primary
size="small"
onSubmit={this.handleSubmit}
type="submit"
value={this.state.date}
>
Update
</Button>
</form>
</Menu.Item>
<Menu.Item>
<Button color="green" size="small">
Export CSV
</Button>
</Menu.Item>
</Menu.Menu>
</Menu>
{this.state.customRange}
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<DatePicker />, rootElement);
Я попытался
//onHover
onHover() {
this.setState({
placeholder: this.state.date.text
});
console.log(this.state.date.text)
}
, и я получил неопределенный. Это связано с тем, что состояние не устанавливается до тех пор, пока не будет запущен onClick. Так как я могу получить доступ к this.state.date.text до этого?