React DatePicker - 如何在日期 select 调用自定义函数？

Question

在 React 中，我尝试添加一个基于日期选择的搜索功能。我已经提到并使用 https://github.com/wojtekmaj/react-date-picker.

function Result(props) {
  const [value, onChange] = useState(new Date());

  return(
   <div>
     <DatePicker onChange={onChange} value={value} />
   </div>
  );
}

我的另一个 class 组件，

handleOnClick = (e) => {
  console.log(e);
}

<Result handleOnclick={this.handleOnclick} />

现在我想在通过传递值（日期）选择日期后立即调用我自己的函数 handleOnclick。在我的自定义函数中，我应该能够获取选定的日期。

依赖关系是，

"react": "^17.0.1",
"react-date-picker": "^8.0.3",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"

我怎样才能实现这个改变？请帮助我。

Answer 1

您可以将自定义函数传递给 onChange 道具并从那里更新状态。并在那里执行您的自定义逻辑。

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
    
function Result(props) {
  const [value, onChange] = useState(new Date());

  const onDateChange=(newDate)=>{
   //Your custom code here
   props.handleOnclick(newDate);
   onChange(newDate);
  };

  return (
    <div>
      <DatePicker
        onChange={onDateChange}
        value={value}
      />
    </div>
  );
}

另一种选择是使用 useEffect 并将值添加为依赖项，当值更改时运行。

useEffect(()=>{
//your custom code here
},[value]);

React DatePicker - 如何在日期 select 调用自定义函数？

React DatePicker - How to call custom function on date select?

date

datepicker

reactjs

react-native