antd 输入搜索组件在 blur() 上没有变得模糊

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 在处理程序之后重新聚焦它。您可以在blur 处理程序上使用setTimeout 使其正确模糊。

但使用event.target 只能在输入键上使用，您必须在输入上使用ref 元素才能使其在按钮上起作用。

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

查看示例here