react +antd 实现时间与选择器的重置事件

在React中使用Ant Design时，可以利用Form组件和DatePicker、Select组件的onChange事件来实现重置功能。以下是一个简单的例子，展示了如何在选择器的值改变时重置其它选择器的值：

import React, { useState } from 'react';
import { Form, DatePicker, Select } from 'antd';
 
const { Option } = Select;
 
const ResetExample = () => {
  const [date, setDate] = useState(null);
  const [selectValue, setSelectValue] = useState(null);
 
  const handleDateChange = (value) => {
    setDate(value);
    if (selectValue !== null) {
      setSelectValue(null);
    }
  };
 
  const handleSelectChange = (value) => {
    setSelectValue(value);
    if (date !== null) {
      setDate(null);
    }
  };
 
  return (
    <Form layout="inline">
      <DatePicker onChange={handleDateChange} value={date} />
      <Select
        style={{ margin: '0 8px' }}
        onChange={handleSelectChange}
        value={selectValue}
        placeholder="Select a option and reset the other"
      >
        <Option value="option1">Option 1</Option>
        <Option value="option2">Option 2</Option>
        <Option value="option3">Option 3</Option>
      </Select>
    </Form>
  );
};
 
export default ResetExample;

在这个例子中，当DatePicker的值改变时，如果Select组件当前有选中的值，则会清除Select的选中值。同样，当Select的值改变时，如果DatePicker有选中的值，则会清除DatePicker的值。这样就实现了两个组件值变化时的相互重置。