Search 搜索

使用场景

当页面需要提供搜索功能时可以使用快捷搜索框。

示例

基本示例

inline

function Basic() { return ( <Group> <Search onChange={(val) => console.log('change:', val)} onSubmit={(val) => console.log('submit:', val)} /> <Search buttonText="搜索订单" onChange={(val) => console.log('change:', val)} onSubmit={(val) => console.log('submit:', val)} /> </Group> ); }

function Basic() {
  return (
    <Group>
      <Search onChange={(val) => console.log('change:', val)} onSubmit={(val) => console.log('submit:', val)} />
      <Search
        buttonText="搜索订单"
        onChange={(val) => console.log('change:', val)}
        onSubmit={(val) => console.log('submit:', val)}
      />
    </Group>
  );
}

简洁外观

inline

function Simple() { return ( <Search shape="simple" onChange={(val) => console.log('change:', val)} onSubmit={(val) => console.log('submit:', val)} /> ); }

function Simple() {
  return (
    <Search
      shape="simple"
      onChange={(val) => console.log('change:', val)}
      onSubmit={(val) => console.log('submit:', val)}
    />
  );
}

允许清空

inline

function HasClear() { return ( <Group> <Search hasClear defaultValue="hello world" onChange={console.log} onSubmit={console.log} /> <Search shape="simple" hasClear defaultValue="hello world" onChange={console.log} onSubmit={console.log} /> </Group> ); }

function HasClear() {
  return (
    <Group>
      <Search hasClear defaultValue="hello world" onChange={console.log} onSubmit={console.log} />
      <Search shape="simple" hasClear defaultValue="hello world" onChange={console.log} onSubmit={console.log} />
    </Group>
  );
}

API

字段	描述
shape	"normal" | "simple" 形态
buttonText	ReactNode 搜索按钮文案
value	string 输入框受控制
defaultValue	string 输入框非受控值
onChange	(value: string) => void 输入框值变化时的回调
onSubmit	(value: string) => void 点击提交时的回调
placeholder	string 输入框占位符
hasClear	boolean 是否有清空
inputWidth	string 输入框宽度