田强 / qx-common · Files

---

nav: path: /component title: 组件 order: 1 group: path: /common title: 公共组件方法

order: 0

QxSearchInput 实时搜索框

Demo:

import { QxSearchInput } from '@qx/common';
import type { InputRef } from 'antd';
import { Button } from 'antd';
import { useRef, useState } from 'react';

export default () => {
  // 输入框内容
const [keyValue, setKeyValue] = useState('');
const searchInputRef = useRef<InputRef>(null);

const handleChange = (val: string) => {
  // 输入框内容变化时的回调、按下回车的回调
  setKeyValue(val);
};
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          // 自动聚焦
          searchInputRef?.current!.focus({
            cursor: 'end',
          });
        }}
      >
        聚焦
      </Button>
      <QxSearchInput
        searchInputRef={searchInputRef}
        value={keyValue}
        onChange={handleChange}
        onPressEnter={handleChange}
        // prefix={prefixIcon}
      />
    </div>
  );
};

More skills for writing demo: https://d.umijs.org/guide/basic#write-component-demo