作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
antd下拉选项可搜索树结构的用法
落霞与孤鹜齐飞 7月4日 9 0 0 9 0 0

主要用到了ant design ^3.26.20 (老项目) 的 <TreeNode />组件

import React from 'react'
import { TreeSelect } from 'antd';

const { SHOW_PARENT } = TreeSelect;

const treeData = [
  {
    title: '北京',
    value: 'b010',
    key: 'b010'
  },
  {
    title: '四川',
    value: 's28',
    key: 's28',
    children: [
      {
        title: '成都',
        value: 's028',
        key: 's028',
      },
      {
        title: '绵阳',
        value: 's0816',
        key: 's0816',
      },
      {
        title: '南充',
        value: 's0817',
        key: 's0817',
      },
    ],
  },
];

export default class CitySelect extends React.Component {
  state = {
    value: [],
  };

  onChange = value => {
    // console.log('onChange ', value);
    this.setState({ value });
  };

  render() {
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      placeholder: 'Please select',
      style: {
        width: '33vw',
      },
    };
    return <TreeSelect {...tProps} />;
  }
}

基本用法受控组件勾选了就是了,树结构的value就是需要的值。

如果从其他页面带参数来,默认选中匹配,并且执行一些副作用呢?

componentDidMount() {
    this.setState({
      value: ['北京']
    })
  }


可以看到,选框是选中了,但是选项并没有匹配。

  componentDidMount() {
    this.setState({
      value: ['b010']
    })
  }

可以看到,这样就可以了

下面说一下实际使用:比如从某个页面后系统传参带入过来,需要选中,并且依靠它为参数再去做一些请求

 componentDidMount() {
    const cityCode = qs.parse(location.search.substr(1)).cityCode
    // 模拟发请求获取下拉选项,当然实际开发中还需要处理数据成下面这种格式
    setTimeout(() => {
      this.setState({
        treeData,
        value: decodeURIComponent(cityCode)
      }, () => {
        const params = {cityCode}
        // api.query(params)
      })
    }, 1000)
  }

  render() {
    const {treeData, value} = this.state
    const tProps = {
      treeData,
      value,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      placeholder: 'Please select',
      style: {
        width: '33vw',
      },
    };
    return <TreeSelect {...tProps} />;
  }
扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦