侦听反应日选取器输入'change'事件

Question

我正在使用react日期选择器库在我的网站上显示日期选择器。我想听听日期什么时候改了。我知道有一些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");
});

我希望变更处理程序被解雇。我不知道为什么不是。我如何才能倾听价值观的变化？

Answer 1

您可以在react-day-picker文档中看到问题的答案

您应该通过以下方式将事件处理程序传递给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的上下文API或Redux。(状态管理工具(