我只是尝试更新下拉占位符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,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,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","month")
                        .startOf("month")
                        .format("YYYY-MM-DD"),"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？