收听 react-day-picker 输入 'change' 事件答案

【问题标题】：Listen to react-day-picker input 'change' event收听 react-day-picker 输入 'change' 事件
【发布时间】：2020-04-06 04:32:34
【问题描述】：

我正在使用 react-day-picker 库在我的网站上显示日期选择器。我想听听日期何时更改。我知道您可以将 onDayChange 钩子添加到 DayPickerInput 组件中，但我想监听组件外部的更改。

示例：(https://codesandbox.io/s/react-day-picker-base-mpcqy)

import React from "react";
import ReactDOM from "react-dom";
import DayPickerInput from "react-day-picker/DayPickerInput";

import "react-day-picker/lib/style.css";

function Example() {

  return (
    <div>
      <h3>DayPickerInput</h3>
      <DayPickerInput placeholder="DD/MM/YYYY" format="DD/MM/YYYY" />
    </div>
  );
}

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

var input = document.getElementsByTagName("input")[0];
input.addEventListener("change", () => {
  console.log("changed");
});

我希望 on change 处理程序会被触发。我不确定为什么不是。如何聆听价值变化？

【问题讨论】：

标签： reactjs react-day-picker

【解决方案1】：

你可以在react-day-pickerdocumentations看到你的问题的答案

您应该通过这种方式将事件处理程序传递给您的DayPickerInput 组件：

function Example() {
  const [value, setValue] = useState(undefined);
  handleDayChange(day) {
    setValue(day);
  }

  return (
    <div>
      <h3>DayPickerInput</h3>
      <DayPickerInput
       placeholder="DD/MM/YYYY" 
       format="DD/MM/YYYY"
       onDayChange={day => handleDayChange(day)}
      />
    </div>
  );
}

这是监听事件的唯一方法。另外你应该知道直接改变 DOM 是非常糟糕的做法。

如果你想让value 可以全局访问，你应该使用React 的context API 或Redux。（状态管理工具）

【讨论】：