search-input 搜索框

搜索框（Search Box）组件是一种常见的用户界面组件，用于接收用户输入的搜索关键词，并触发相应的搜索操作。

Props参数

名称	类型	是否必传	默认值	描述
defaultValue	string	否	-	默认初始值
clear	boolean	否	-	是否可以清除
readonly	boolean	否	-	是否只读
searchText	string	否	-	搜索文本
renderSuffix	ReactNode	否	-	自定义渲染尾部内容
此时searchText字段将失效
onSearch	(value: string) => void	否	-	点击搜索事件
onClear	() => void	否	-	点击清除事件

示例

import MMSearchInput from '../../components/search-input'
import Taro from '@tarojs/taro'
import MMIconFont from '~/components/icon-font'
import MMIconFontName from '~/components/icon-font/const'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  const handleSearch = (data) => {
    Taro.showToast({ icon: 'none', title: data })
  }

  return (
    <MMPageContainer title="搜索框">
      <PageDemoBlock title="普通搜索框">
        <MMSearchInput placeholder="请输入商品查询" clear onSearch={handleSearch} />
      </PageDemoBlock>

      <PageDemoBlock title="自定义后缀">
        <MMSearchInput placeholder="请输入商品查询" onSearch={handleSearch} renderSuffix={<MMIconFont value={MMIconFontName.Search} />} />
      </PageDemoBlock>

      <PageDemoBlock title="只读">
        <MMSearchInput defaultValue="奥妙洗衣液" readonly />
      </PageDemoBlock>
    </MMPageContainer>
  )
}