MultiSelector

通用的多选组件

API

参数名 说明 必填 类型 默认值 备注
size 组件尺寸 否 string medium small/medium/large
disabled value 受控 否 array
width 组件宽度 否 number
placeholder placeholder 否 string
defaultValue 默认 value（不受控） 否 array
value value 受控 否 array
defaultDataSource 默认 dataSource 否 array
onChange 回调 否 func(value, actionType, dataSource) 与Select一致
fetchData 搜索获取数据 是 promise
itemRender 自定义渲染下拉项 否 func(item) 与Select一致
fillProps 自定义选中态的字符串 否 string label 与Select一致
min 最少个数 否 number
max 最大个数 否 number

参数说明

fetchData

方法必须返回一个 promise 或者 async，需要按照约定返回固定的数据格式：

<MultiSelector
  fetchData={async ({ inputValue }) => {
    const response = await axios({
      url: '',
      params: {
        keyword: inputValue
      }
    });

    // dataSource 的单个 item 必须有 value&label 属性
    return response.data.data.dataSource || [];
  }}
/>

defaultDataSource

回填 value 或者设置了 defaultValue 的场景必须设置该属性，否则无法渲染选中的 tag

DEMO 列表

简单用法

简单用法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MultiSelector from '@icedesign/multi-selector';

class App extends Component {
  fetchData = ({ inputValue }) => {
    return new Promise(function(resolve) {
      setTimeout(resolve, 1 * 1000);
    }).then(() => {
      return [{
        value: 1,
        label: inputValue,
      }, {
        value: 2,
        label: '222' + inputValue,
      }];
    });
  }

  render() {
    const style = {
      margin: '10px 0'
    };
    const defaultDataSource = [{
      value: 1,
      label: '1111',
    }];

    return (
      <div>
        <MultiSelector
          defaultValue={[1]}
          defaultDataSource={defaultDataSource}
          fetchData={this.fetchData}
          style={style}
        />

        <div>禁用状态</div>
        <MultiSelector
          disabled={true}
          defaultValue={[1]}
          defaultDataSource={defaultDataSource}
          fetchData={this.fetchData}
          style={style}
        />

        <div>不同 size</div>
        <MultiSelector
          size="large"
          defaultValue={[1]}
          defaultDataSource={defaultDataSource}
          fetchData={this.fetchData}
          style={style}
        />
        <MultiSelector
          size="medium"
          defaultValue={[1]}
          defaultDataSource={defaultDataSource}
          fetchData={this.fetchData}
          style={style}
        />
        <MultiSelector
          size="small"
          defaultValue={[1]}
          defaultDataSource={defaultDataSource}
          fetchData={this.fetchData}
          style={style}
        />

        <div>自定义宽度</div>
        <MultiSelector
          width={500}
          defaultValue={[1]}
          defaultDataSource={defaultDataSource}
          fetchData={this.fetchData}
          style={style}
        />
      </div>
    );
  }
}

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

value 受控

value 受控，同时通过 minx/max 指定个数

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MultiSelector from '@icedesign/multi-selector';

class App extends Component {

  state = {
    value: []
  }

  onChange = (value) => {
    this.setState({value});
  }

  fetchData = ({ inputValue }) => {
    return new Promise(function(resolve) {
      setTimeout(resolve, 1 * 1000);
    }).then(() => {
      return [{
        value: 1,
        label: inputValue,
      }, {
        value: 2,
        label: '222' + inputValue,
      }, {
        value: 3,
        label: '333' + inputValue,
      }];
    });
  }

  render() {
    return (
      <div>
        <MultiSelector
          min={1}
          max={2}
          value={this.state.value}
          fetchData={this.fetchData}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

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

自定义渲染

通过 itemRender 属性可以自定义下拉列表选项渲染；通过 fillProps 可以自定义选中态渲染的字符串。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MultiSelector from '@icedesign/multi-selector';

class App extends Component {

  state = {
    value: []
  }

  onChange = (value) => {
    this.setState({value});
  }

  fetchData = ({ inputValue }) => {
    return Promise.resolve(
      [{
        value: '23678',
        label: '哈哈',
        img: 'https://img.alicdn.com/tfs/TB1gOdQRCrqK1RjSZK9XXXyypXa-192-192.png'
      }, {
        value: '45668',
        label: '呵呵',
        img: 'https://img.alicdn.com/tfs/TB15.qVCFzqK1RjSZFoXXbfcXXa-80-80.png'
      }]
    );
  }

  render() {
    return (
      <div>
        <MultiSelector
          value={this.state.value}
          fetchData={this.fetchData}
          onChange={this.onChange}
          itemRender={(item) => {
            return (
              <div style={{
                display: 'flex',
                alignItems: 'center',
              }}>
                <img src={item.img} width={20} height={20}
                 />
                <span>{item.label}</span>
              </div>
            )
          }}
          fillProps="value"
        />
      </div>
    );
  }
}

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

回填 value

回填 value 时，如果选中态用了其他字段，需要通过 defaultDataSource 字段指定默认数据

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MultiSelector from '@icedesign/multi-selector';

class App extends Component {

  state = {
    value: ['45668']
  }

  onChange = (value) => {
    this.setState({value});
  }

  fetchData = ({ inputValue }) => {
    return Promise.resolve(
      [{
        value: '23678',
        label: '哈哈',
        img: 'https://img.alicdn.com/tfs/TB1gOdQRCrqK1RjSZK9XXXyypXa-192-192.png'
      }, {
        value: '45668',
        label: '呵呵',
        img: 'https://img.alicdn.com/tfs/TB15.qVCFzqK1RjSZFoXXbfcXXa-80-80.png'
      }]
    );
  }

  render() {
    return (
      <div>
        <MultiSelector
          value={this.state.value}
          defaultDataSource={[
            {
              value: '45668',
              label: '呵呵',
              img: 'https://img.alicdn.com/tfs/TB15.qVCFzqK1RjSZFoXXbfcXXa-80-80.png'
            }
          ]}
          fetchData={this.fetchData}
          onChange={this.onChange}
          itemRender={(item) => {
            return (
              <div style={{
                display: 'flex',
                alignItems: 'center',
              }}>
                <img src={item.img} width={20} height={20}
                 />
                <span>{item.label}</span>
              </div>
            )
          }}
          fillProps="label"
        />
      </div>
    );
  }
}

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

自定义 fetch 出错信息

自定义 fetch 出错信息

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MultiSelector from '@icedesign/multi-selector';

class App extends Component {
  fetchData = ({ inputValue }) => {
    return Promise.reject(new Error(
      '接口报错了，请参考 <a target="_blank" href="/">文档</a> 进行修复'
    ));
  }

  render() {
    return (
      <div>
        <MultiSelector
          fetchData={this.fetchData}
        />
      </div>
    );
  }
}

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