# MIconSelection 自定义图标选择

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/icon-selection/freepass)
- 平台：移动端
- 维护者：许平源
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MIconSelection]

## 代码演示

### 使用方法

基础使用方法

```jsx
import React, { PureComponent } from 'react';
import { MIconSelection } from '@weapp/ui';

class BasicDemo extends PureComponent<any, any> {

  state = {
    customId: 2,
    customId2: 3,
    defaultCustomId: 3
  }
  handleChange = (customId: number | string) => {
    console.log('customId', customId)
    this.setState({ customId })
  }
  handleChange2 = (customId: number | string) => {
    console.log('customId', customId)
    this.setState({ customId2: customId })
  }
  render() {
    const { customId, customId2, defaultCustomId } = this.state;
    return (
      <div>
        <h3>基础使用</h3>
        <MIconSelection
          value={customId}
          onChange={this.handleChange}
        />
        <h3>开启清除已选功能</h3>
        <MIconSelection
          value={customId2}
          onChange={this.handleChange2}
          canClear
        />
        <h3>只读</h3>
        <MIconSelection
          value={4}
          readOnly
        />
        <h3>禁用</h3>
        <MIconSelection
          value={5}
          disabled
        />
      </div>
    );
  }
}

export default BasicDemo;
```

### 扩展图标选择

扩展图标选择（MRichIconSelection）

```jsx
import React, { PureComponent } from 'react';
import { MIconSelection } from '@weapp/ui';

const MRichIconSelection = MIconSelection.MRichIconSelection

class BasicDemo extends PureComponent<any, any> {

  state = {
    value: 'Icon-Ctrip',
    value2: 'Icon-inc',
  }
  handleChange = (value: number | string) => {
    console.log('value', value)
    this.setState({ value })
  }
  handleChange2 = (value: number | string, options: any) => {
    console.error('RichIconSelection onChange', value, options)
    this.setState({ value2: value })
  }
  render() {
    const { value, value2 } = this.state;
    return (
      <div>
        <h3>基础使用</h3>
        <MRichIconSelection
          value={value}
          onChange={this.handleChange}
        />
        <h3>开启清除已选功能</h3>
        <MRichIconSelection
          value={value2}
          onChange={this.handleChange2}
          canClear
        />
        <h3>只读</h3>
        <MRichIconSelection
          value={'Icon-Cloud-clothing'}
          readOnly
        />
        <h3>禁用</h3>
        <MRichIconSelection
          value={'Icon-order'}
          disabled
        />
      </div>
    );
  }
}

export default BasicDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| defaultValue | 自定义图标编号（默认） | `number` \| `string` | false | 1 |
| value | 自定义图标编号 | `number` \| `string` | false |  |
| bindTriggerContainer | 是否将 trigger 弹出层固定在该节点下 | boolean | false | true |
| triggerProps | trigger 的 props | 参考 trigger 组件的 props | false |  |
| onChange | 图标变化回调（第一个参数和 appIcon 的主键相同，第二个参数返回图标的详细信息（包括颜色） | (customId: number,options:any) => void | false |  |
