компонент поиска в antd не размывается при размытии ()

Question

Я использую компонент ввода ввода библиотеки antd.Он поставляется с функцией обратного вызова onSearch, где мы можем поймать цель события и можем использовать глобальные функции ввода, такие как blur (), focus ().Но это не похоже на работу.Если я присоединяю любой другой обработчик событий, например, onClick или onChange, это сработало.Это ошибка или я что-то не так делаю.

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Input } from 'antd';

const Search = Input.Search;

ReactDOM.render(
  <div>
    <Search
      placeholder="input search text"
      onSearch={(value,e) => {
        console.log(e.target);
        e.target.blur();
        console.log(value)
        }}
      enterButton
      onChange={e => {
        console.log(e.target)
        e.target.blur()}}
    />
  </div>,
  document.getElementById('container')
);

Answer 1

Это из-за antd перефокусировки после обработчика.Вы можете использовать setTimeout на обработчике blur, чтобы правильно размыть изображение.

Но использование event.target будет работать только на клавише ввода, вы должны использовать элемент ref на входе, чтобы он работал на кнопках.

<Search
  placeholder="input search text"
  onSearch={(value, e) => {
    const input = this.input.current;
    setTimeout(() => input.blur(), 0);
  }}
  enterButton
  ref={this.input}
/>

См. Пример здесь