如何在反应中更新日期占位符选项 onMouseOver

Question

我只是想更新下拉占位符 onMouseOver 我曾尝试在句柄更改中执行此操作，但这需要双击，所以我能想到的最好的办法是在鼠标悬停时执行此操作.我遇到的问题是它导致未定义或根本没有 console.log。我想要的是改变正在显示的占位符。这是我的代码。以及一个易于回答的codesandbox 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呢？

Answer 1

你不能只设置一个标志来判断按钮是否被点击或什么的吗？就像是 `

onHover() {
    if (this.state.isClicked) {
      this.setState({
        placeholder: this.state.date.text
      });
      console.log(this.state.date.text)
    }
  }

`

Answer 2

这是因为您需要使用函数将状态更改为 return 状态更新异步。这样做

  handleChange = (e, d) => {
    e.preventDefault();
    e.persist();
    this.setState((state, props) => ({
      date: d.value
    }));
    if (!this.state.isClicked) {
      this.setState((state, props) => ({
        placeholder: state.date.text
      }));
    }

如何在反应中更新日期占位符选项 onMouseOver

How can I update the date placeholder option onMouseOver in react

javascript

jsx

reactjs

semantic-ui

semantic-ui-react