首页 文章

antd输入搜索组件在模糊时不会模糊（）

提问于
浏览 次
1

我正在使用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')
);
javascript reactjs input antd

1 回答

  • 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

    回复于

相关问题