@uiw/react-search-tree

SearchTree 带搜索的Tree选择控件

使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。

import { SearchTree } from 'uiw';
// or
import SearchTree from '@uiw/react-search-tree';

基础实例

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import {  SearchTree } from 'uiw';

const data = [
  {
    label: '上海市',
    key: '1-0-0',
    children:[
      { label: '黄浦区', key: '1-0-1' },
      { label: '卢湾区', key: '1-0-2' },
      {
        label: '徐汇区',
        key: '1-0-3',
        children:[
          { label: '半淞园路街道', key: '1-1-0' },
          { label: '南京东路街道', key: '1-2-0' },
          { label: '外滩街道', key: '1-3-0' },
        ]
      },
    ]
  },
  {
    label: '北京市',
    key: '2-0-0',
    children:[
      { label: '东城区', key: '2-1-0' },
      { label: '西城区', key: '2-2-0' },
      {
        label: '崇文区',
        key: '2-3-0',
        children:[
          { label: '东花市街道', key: '2-3-1' },
          { label: '体育馆路街道', key: '2-3-2' },
          { label: '前门街道', key: '2-3-3' },
        ]
      },
    ]
  },
  { label: '澳门', key: '3' },
];
const Demo = () => {

const [value,valueSet]=useState([{ label: '东花市街道', key: '2-3-1' }])

const onChange=(selectd, selectedAll,  isChecked)=>{
  console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
  valueSet(selectedAll)
}

 return (<SearchTree
    allowClear={true}
    onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
    onChange={onChange}
    value={value}
    options={data}
    placeholder="请输入选择"
  />)
}
ReactDOM.render(<Demo />, _mount_);

Form中使用

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import {  Form, Button, SearchTree, Card, Row, Col } from 'uiw';;


const Demo = () => {
const form=useRef()

  const data = [
    {
      label: '上海市',
      key: '1-0-0',
      children:[
        { label: '黄浦区', key: '1-0-1' },
        { label: '卢湾区', key: '1-0-2' },
        {
          label: '徐汇区',
          key: '1-0-3',
          children:[
            { label: '半淞园路街道', key: '1-1-0' },
            { label: '南京东路街道', key: '1-2-0' },
            { label: '外滩街道', key: '1-3-0' },
          ]
        },
      ]
    },
    {
      label: '北京市',
      key: '2-0-0',
      children:[
        { label: '东城区', key: '2-1-0' },
        { label: '西城区', key: '2-2-0' },
        {
          label: '崇文区',
          key: '2-3-0',
          children:[
            { label: '东花市街道', key: '2-3-1' },
            { label: '体育馆路街道', key: '2-3-2' },
            { label: '前门街道', key: '2-3-3' },
          ]
        },
      ]
    },
    { label: '澳门', key: '3' },
  ];

  const setValue=()=>{
    form.current.setFields({ searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }] })
  }

  const resetValue=()=>{
    form.current.resetForm()
  }

  return (
    <div>
      <Form
        ref={form}
        onSubmitError={(error) => {
          if (error.filed) {
            return { ...error.filed };
          }
          return null;
        }}
        onSubmit={({initial, current}) => {
          console.log('current',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={{
          searchTree: {
            initialValue:[{ label: '东花市街道', key: '2-3-1' },{ label: '前门街道', key: '2-3-3' }],
            children: (
                <SearchTree
                  allowClear={true}
                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
                  options={data}
                  placeholder="请输入选择"
                />
            )
          },
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <div>
              <Row>
                <Col fixed>{fields.searchTree}</Col>
              </Row>
              <Row>
                <Col fixed>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                  <Button onClick={setValue} type="primary" >setValue</Button>
                  <Button onClick={resetValue} type="primary" >重置</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
value	指定当前选中的条目	[{label:string, key:string}]	-
options	下拉数据源,可参考Tree下拉数据源	[{label:string, key:string, children: [{label:string, key:string}] }]	-
placeholder	选择框默认文字	String	-
size	选择框尺寸	Enum{large, default, small }	default
onChange	选中 option，或 input 的 value，调用此函数	function(selectd, selectdAll, isChecked)=>void	-
onSearch	文本框值变化时回调	function(searchValue)	-
loading	加载中状态	Boolean	false