1

我有一个应用程序应该从数据选择器和时间选择器中获取数据，并在控制台中输出这些数据。

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}
function onChangeTime(value) {
  console.log(value);
}

ReactDOM.render(
  <>
    <DatePicker
      renderExtraFooter={() => (
        <RangePicker onChange={onChangeTime} format="HH:mm" />
      )}
      onChange={onChange}
      onOk={onOk}
    />
  </>,
  document.getElementById("container")
);

所以，在日期选择器的页脚上，我有一个范围时间选择器，它应该输出值作为一个范围（例如：10:00 - 12:00）。
问题：现在我在尝试设置日期时遇到问题。当我点击一个日期时，日期选择器正在关闭，当我第一次设置时间时，同样的问题，当我第二次点击时，日期选择器也正在关闭，我无法设置日期。
问题：如何解决问题以及如何在onChange函数中输出日期和时间onChangeTime？
演示：https ://codesandbox.io/s/distracted-wu-roqvr?file=/index.js:206-214

4

1 回答 1

0

github ant-design bug tracker 上发布了类似的问题/票证。这里有一个链接供您参考：

RangePicker 与 Select 组件中的 renderExtraFooter 触发来自 RangePicker 的 onOpenChange #24696

有一种解决方法，即创建一个受控日期组件。目前发生的情况是当您在 DatePicker 中选择一个日期时，它的默认行为是关闭，当焦点从 DatePicker 移开时也会发生同样的情况，即当您与 TimePicker 交互时。

我建议如下：

import React, {useState} from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, TimePicker, Button } from "antd";

const { RangePicker } = TimePicker;

const App = () => {
const [datePickerOpen, setDatePickerOpen] = useState(false);

function onChange(value, dateString) {
   console.log("Selected Time: ", value);
   console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
   console.log("onOk: ", value);
}

function onChangeTime(value) {
   console.log(value);
}

return <DatePicker
         open={datePickerOpen}
         onClick={() => setDatePickerOpen(true)} 
         renderExtraFooter={(mode) => <div>
            <RangePicker onChange={onChangeTime} format="HH:mm" />
            <Button onClick={() => setDatePickerOpen(false)}>Apply</Button> 
           </div>
         }
         onChange={onChange}
        />
};

ReactDOM.render(
  <>
    <App/>
  </>,
  document.getElementById("container")
);

对代码的主要更改是将函数移动到功能组件中，添加状态挂钩 => [datePickerOpen, setDatePickerOpen]，初始默认值为 false。在 DatePicker 组件内部，我使用了“open”属性使其成为受控组件，然后添加了一个“onClick”事件处理程序来打开 DatePicker。在“renderExtraFooter”中，我添加了一个“div”，它充当 RangePicker 和 Button 组件的包装器。当用户输入完日期和时间后，他们可以点击按钮“应用”组件来关闭 DatePicker。

我没有对样式做任何事情，按钮只是 Ant Design 的默认按钮。您可以在按钮上添加颜色以引起用户“行动号召”的注意，还可以应用样式来对齐 TimePicker 和按钮。

希望这可以帮助。

于 2020-06-30T08:18:34.953 回答