Question

我正在使用antd库的Search Input组件。它带有一个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}
/>

查看示例here

antd输入搜索组件不会在blur（）上变得模糊

1 个答案: