ant-design DatePicker焦点onBlur和onFocus问题

gt0wga4j  于 4个月前  发布在  其他
关注(0)|答案(5)|浏览(63)

What problem does this feature solve?

在4.24.12中鼠标点击输入框onFocus触发一次,通过日期面板选择日期后焦点回到输入框中,不会触发onBlur
在5.20.2中鼠标点击输入框onFocus触发一次,点击日期面板选择日期时触发一次onBlur并立即触发一次onFocus,选择完成日期回填后再次触发一次onFocus,然后焦点立即跳走并再次触发onBlur

What does the proposed API look like?

4.24.12的方式是合理的,5.20.2onFocus和onBlur的触发不合理

jtw3ybtb

jtw3ybtb2#

@kfinder 哇,同问

ibrsph3r

ibrsph3r4#

Hello @kfinder. Please provide a online reproduction by forking this one or provide a minimal GitHub repository like create-react-app-antd . Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @kfinder,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个 在线重现案例 ,或者提供一个最小化的 GitHub 仓库(类似 create-react-app-antd )。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现,为什么这是必需的?

ecfsfe2w

ecfsfe2w5#

import React from 'react';
import './index.css';
import type { DatePickerProps } from 'antd';
import { DatePicker, Space } from 'antd';

const onChange: DatePickerProps['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};

const handleFocus = () => {
  console.log('handleFocus', 'handleFocus');
};

const handleBlur = () => {
  console.log('handleBlur', 'handleBlur');
};

const App: React.FC = () => (
  <Space direction="vertical">
    <DatePicker onChange={onChange} onFocus={handleFocus} onBlur={handleBlur} />
    <DatePicker onChange={onChange} onFocus={handleFocus} onBlur={handleBlur} picker="week" />
    <DatePicker onChange={onChange} onFocus={handleFocus} onBlur={handleBlur} picker="month" />
    <DatePicker onChange={onChange} onFocus={handleFocus} onBlur={handleBlur} picker="quarter" />
    <DatePicker onChange={onChange} onFocus={handleFocus} onBlur={handleBlur} picker="year" />
  </Space>
);

export default App;

相关问题