javascript - 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 在 handler 之后重新聚焦它。您可以在 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