如何在點擊反應彩虹日期時間選擇器上的操作按鈕時呼叫自定義函式-有解無憂

我正在使用“react-rainbow-components”中的 DateTimePicker，一旦我們單擊“確定”或“取消”等操作按鈕，我想呼叫自定義方法。我不確定我們怎么做不到，因為根據 DateTimePicker 的檔案，它不接受任何處理該問題的道具，這是我們解決此問題的任何其他解決方法嗎？

import { DateTimePicker } from "react-rainbow-components";
import { useState } from "react";

export default function App() {
  const [initialState, updatedState] = useState(new Date());
  
  
  return (
    <div className="App">
      <DateTimePicker
        value={initialState}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        label="DateTimePicker Label"
        onChange={(value) => updatedState(value)}
      />
    </div>
  );
}

如何在點擊反應彩虹日期時間選擇器上的操作按鈕時呼叫自定義函式

uj5u.com熱心網友回復：

從這個庫的 git 中的代碼：當您單擊帶有“確定”標簽的按鈕時，將執行道具 OnChange

https://github.com/nexxtway/react-rainbow/blob/master/src/components/DateTimePicker/pickerModal.js

https://github.com/nexxtway/react-rainbow/blob/master/src/components/TimePicker/timeSelect.js

你使用它有什么問題嗎？

uj5u.com熱心網友回復：

okLabel這是使用和cancelLabel道具的解決方案。您可以通過將它們作為 jsx 引數傳遞okLabel來監聽點擊事件。cancelLabel

這是反應代碼：

import { DateTimePicker } from 'react-rainbow-components';
import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [initialState, updatedState] = useState(new Date());

  const okClickHandler = () => {
    console.log('ok clicked');
  };

  const cancelClickHandler = () => {
    console.log('cancel clicked');
  };

  return (
    <div className="App">
      See console logs
      <DateTimePicker
        value={initialState}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        label="DateTimePicker Label"
        onChange={(value) => updatedState(value)}
        okLabel={
          <span className="clickableSpan" onClick={okClickHandler}>
            Ok
          </span>
        }
        cancelLabel={
          <span className="clickableSpan" onClick={cancelClickHandler}>
            Cancel
          </span>
        }
      />
    </div>
  );
}

這是相關的CSS：

.clickableSpan {
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 100px;
}

#time-picker_ok-button {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#time-picker_cancel-button {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

您可以查看此 stackblitz以獲得此變通解決方案的實時作業示例。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/508001.html

標籤：javascript 反应反应彩虹组件

上一篇：ReactTypescript中的型別不存在屬性

下一篇：使用Dlookup從查詢中獲取值到子表單中