@aliretail/react-materials-components/demo/CustomSelect/usage.md

B 端物料组件库

---
title: CustomSelect-Usage
order: 1
---

本 Demo 演示下拉组件的用法。


```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { CustomSelect } from '@aliretail/react-materials-components';
import jsonp from 'jsonp';

const dataSource2 = [
    {
      label: 'test',
      value: 1,
      // name: '1112'
    },
    {
      label: 'test11',
      value: 13213,
      isCustom: true
    }
  ]
class App extends Component {
   state = {
     dataSource: [],
     value: '' || []
  };
  handleSearch = (value) => {
      if (this.searchTimeout) {
          clearTimeout(this.searchTimeout);
      }
      this.searchTimeout = setTimeout(() => {
          // eslint-disable-next-line handle-callback-err
          value ? jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {
              const list = data.result.map(item => ({
                  label: item[0], value: item[1]
              }));
              this.setState({
                dataSource: list
              });
          })
          : this.setState({dataSource: []});
      }, 100);
  }
  handleChange = (value, list) => {
    // value: 选择数据的value值
    // list: 选择数据的value+label值
    console.log(value, list)
    this.setState({
      value,
    })
  }
  regexp = (value) => {
    const regexp = /\d/g;
    return regexp.test(value)
  }
  createValidator = (value, list) => {
    // value, 输入框输入数据
    const List = list.map((t) => t.label);
    // true,代表存在，不可创建，false，代表不存在，可以创建
    return !List.includes(value);
  }
  render() {
    const { dataSource, value } = this.state;
     const dataSource3 = [
      {
        label: 'test',
        value: 12,
        // name: '1112'
      },
      {
        label: 'test11',
        value: 134,
        isCustom: true
      }
    ]
    return (
      <div>
        单选+输入<CustomSelect dataSource={dataSource2} value={value} onSearch={this.handleSearch} filterLocal={false} sizeType="small" onChange={this.handleChange} selectType="singleInput" buttonText="自定义" />
         单选<CustomSelect dataSource={dataSource} onSearch={this.handleSearch} filterLocal={false} sizeType="large" onChange={this.handleChange} selectType="single" buttonText="自定义" />
        多选+输入<CustomSelect dataSource={dataSource3} value={value} onSearch={this.handleSearch} filterLocal={false} sizeType="large" onChange={this.handleChange} selectType="multipleInput" buttonText="自定义" />
        多选<CustomSelect dataSource={dataSource} value={value} onSearch={this.handleSearch} filterLocal={false} sizeType="large" onChange={this.handleChange} selectType="multiple" buttonText="新建" />
        只读状态
        <CustomSelect dataSource={dataSource2} value={value}  sizeType="large" readOnly={true}  />
        禁用状态
        <CustomSelect dataSource={dataSource2} onSearch={this.handleSearch} filterLocal={false} sizeType="large" onChange={this.handleChange} selectType="multiple" buttonText="新建" disabled={true} value={value} />

        最大数量限制
        <CustomSelect dataSource={dataSource2} onSearch={this.handleSearch} filterLocal={false} sizeType="small" onChange={this.handleChange} selectType="singleInput" buttonText="自定义" maxAddNum={3} />

         特殊字符校验
        <CustomSelect dataSource={dataSource2} value="1" onSearch={this.handleSearch} filterLocal={false} sizeType="small" onChange={this.handleChange} selectType="singleInput" buttonText="自定义" validator={this.regexp} />
         创建去重校验
        <CustomSelect dataSource={dataSource2} value="1" onSearch={this.handleSearch} filterLocal={false} sizeType="small" onChange={this.handleChange} selectType="singleInput" buttonText="自定义" createValidator={this.createValidator} />
        是否跟随滚动
        <CustomSelect dataSource={dataSource2} value={value} onSearch={this.handleSearch} filterLocal={false} sizeType="small" onChange={this.handleChange} selectType="single" buttonText="自定义" followTrigger={true} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);
```