Wondering what’s next for npm?Check out our public roadmap! »

@uiw/react-search-selectTypeScript icon, indicating that this package has built-in type declarations

4.7.7 • Public • Published

SearchSelect 搜索选择器

搜索选择器

import { SearchSelect } from 'uiw';
// or
import SearchSelect from '@uiw/react-search-select';

基础示例

import ReactDOM from 'react-dom';
import { SearchSelect } from 'uiw';

const Demo = () => {
  const [option, setOption] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [value, setValue] = React.useState(undefined);
  function handleSearch(e) {
    setLoading(true)
    setTimeout(() =>  {
      setOption([
        { label: 'a', value: 2 },
        { label: 'aa', value: 3 },
        { label: 'aaa', value: 4 },
      ]);
      setLoading(false);
    }, 2000);
  }
  return(
    <SearchSelect
      style={{ maxWidth: 200 }}
      showSearch={true}
      allowClear
      value={value}
      disabled={false}
      placeholder="请输入选择"
      onSearch={handleSearch}
      loading={loading}
      option={option}
      onChange={(value) => setValue(value)}
    />
  );
};
ReactDOM.render(<Demo />, _mount_);

在表单中使用

<Form /> 表单中应用 <SearchSelect /> 组件。

import ReactDOM from 'react-dom';
import { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';

const Demo = () => {
  const [option, setOption] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  function handleSearch(e) {
    setLoading(true)
    setTimeout(() =>  {
      setOption([
        { label: 'a', value: 2 },
        { label: 'aa', value: 3 },
        { label: 'aaa', value: 4 },
      ]);
      setLoading(false);
    }, 2000);
  }

  return (
    <div>
      <Form
        onSubmitError={(error) => {
          if (error.filed) {
            return { ...error.filed };
          }
          return null;
        }}
        onSubmit={({initial, current}) => {
          const errorObj = {};
          if (!current.selectField) {
            errorObj.selectField = '默认需要选择内容,选择入内容';
          }
          if(Object.keys(errorObj).length > 0) {
            const err = new Error();
            err.filed = errorObj;
            Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
            throw err;
          }
          Notify.success({
            title: '提交成功!',
            description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,
          });
        }}
        fields={{
          selectField: {
            children: (
              <SearchSelect
                showSearch={true}
                allowClear
                disabled={false}
                placeholder="请输入选择"
                onSearch={handleSearch}
                option={option}
                loading={loading}
              />
            )
          },
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <div>
              <Row>
                <Col fixed>{fields.selectField}</Col>
              </Row>
              <Row>
                <Col fixed>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                </Col>
              </Row>
              <Row>
                <Col>
                  <pre style={{ padding: 10, marginTop: 10 }}>
                    {JSON.stringify(state.current, null, 2)}
                  </pre>
                </Col>
              </Row>
            </div>
          )
        }}
      </Form>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

Props

参数 说明 类型 默认值
allowClear 支持清除 Boolean false
disabled 禁用选择器 Boolean false
defaultValue 指定默认选中的条目 String/Number -
value 指定选中的条目的值 String/Number -
placeholder 选择框默认文字 String -
showSearch 使单选模式可搜索 Boolean -
size 选择框尺寸 Enum{large, default, small } default
onChange 选中 option,或 input 的 value,调用此函数 function(value, option:Option/Array<Option>) -
onSearch 文本框值变化时回调 function(value: String) -
onSelect 被选中时调用,参数为选中项的 value function(value: String/Number ) -
loading 加载中状态 Boolean false

Install

npm i @uiw/react-search-select

DownloadsWeekly Downloads

384

Version

4.7.7

License

MIT

Unpacked Size

56.1 kB

Total Files

10

Last publish

Collaborators

  • avatar