---
title: 用户选择组件
sidemenu: true
---

## 用户选择组件

这也完全是一个受控组件

```typescript
type UserType = {
  id: number;
  nameZh?: string;
  nameEn?: string;
  state?: number;
  account?: string;
  disabled?: boolean;
};

export async function queryUser(search, state?: 0 | 1) {
  return [
  {
    "id": 4295931470,
    "nameZh": "姚熊",
    "nameEn": "beier.yao",
    "state": 1,
    "userName": "beier.yao",
  }
];
}
export async function likeQueryUserById(ids) {
  return [
  {
    "id": 4295931470,
    "nameZh": "姚熊",
    "nameEn": "beier.yao",
    "state": 1,
    "userName": "beier.yao",
  }
];
}
```
```tsx
/**
 * background: '#f0f2f5'
 */

import React, { useState } from 'react';
import { Space, Checkbox } from 'antd';
import {
  queryUser,
  likeQueryUserById,
} from '../server';
import { UserSelect, UserSelectModal } from '@/components';
import UserSelectList from '@/components/UserSelect/list';
export default () => {
  const [users, setUsers] = React.useState([{id: 4295931470, disabled: true}, {id: 4295934471, disabled: false}]);
  const [list, setList] = useState([]);
  const [value, setValue] = useState('');
  const [modalValue, setModalValue] = useState<{ proxyApproveId?: number; proxyUserNotify: number }>({
      proxyUserNotify: 0,
  });

   const renderItem = (data, onDataChange) => {
    return (
      <Checkbox
        checked={Boolean(data?.proxyUserNotify)}
        onChange={(e) => onDataChange({ proxyUserNotify: e.target.checked ? 1 : 0 })}
      >
        代理人审批通过后，发送抄送通知
      </Checkbox>
    );
  };

  return (
    <Space direction="vertical" style={{width: 500}} >
      <>单选：<UserSelect currentUser={{id: 4295933493 }}  value={4295933493}/></>
      <>多选：<UserSelect value={users} onChange={setUsers} mode="multiple" showAllChecked/></>
      <>查询外显：<UserSelectList value={list} onChange={setList} /> </>
      <>选择用户弹窗：<UserSelectModal value={value} onChange={(val)=>setValue(val)} /> </>
      <>选择用户弹窗（选择本人）：<UserSelectModal value={value} onChange={(val)=>setValue(val)} currentUser={{id: 4295933493 }}/> </>
      <>
      选择用户弹窗（额外项）：
      <UserSelectModal
        value={modalValue}
        onChange={(val)=>
        setModalValue(val)}
        renderItem={renderItem}
      >
        <a>修改</a>
      </UserSelectModal>
      </>
      <>
      自定义用户请求：
      <UserSelect queryUser={queryUser} likeQueryUserById={likeQueryUserById} />
      </>
      <>
      自定义用户请求，但是不显示likeQueryUserById：
      <UserSelect queryUser={queryUser} likeQueryUserById={false} />
      </>
    </Space>
  );
};
```

<API src="./index.tsx"></API>