Select带ajax请求

数组渲染Select

import { Select } from 'antd'
const { Option } = Select
const STATUS = [
  { label: '日常', value: 1 },
  { label: '预发', value: 2 }
]
// 多语言
<Select placeholder={formatMessage(lang.placeholder)}>
<Select>
    {array.map((item, keys) => (
        <Select.Option key={keys} value={item.value}>
            {item.label}
        </Select.Option>
    ))}
</Select>
function SelectENV() {
  return (
    <Select placeholder="请选择环境" allowClear>
      {
        STATUS.map(r =>
          <Option value={r.value} key={r.value}>{r.label}</Option>)
      }
    </Select>
  )
}

labelInValue

<Form.Item label="名称">
  {getFieldDecorator('name', {
    // initialValue: state.id || undefined,
    initialValue: state.id ? { key: state.id } : undefined,
    rules: [{ required: true, message: '请输入名称' }],
  })(<SelectApp native labelInValue />)}
</Form.Item>

Select动态渲染

optionKey 抛出值的类型是 字符串，不是 id
labelInValue 传值 {key: id}
form.setFieldsValue({})

Select自带Ajax请求

Select labelInValue 默认 false，返回 id
labelInValue={true} 返回值是一个 对象 {key: 23, label: '倍镜'}

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { Select, Divider, message, Icon } from 'antd'
import { getUsers, putUser } from './_server'
const { Option } = Select;
SelectUser.propTypes = {
  native: PropTypes.bool,
  labelInValue: PropTypes.bool,
  // value: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  onChange: PropTypes.func,
}
SelectUser.defaultProps = {
  native: false,
  labelInValue: false,
  // value: undefined,
  onChange: () => {},
}
function SelectUser(props) {
  const {
    value,
    onChange,
    optionKey = 'id',
    native = false,
    labelInValue = false,
    allowClear = false,
  } = props;
  const [name, setName] = useState('');
  const [data, setData] = useState([])
  useEffect(() => { init() }, [])
  async function init() {
    const res = await getUsers();
    if(res.code !== 0) return;
    const arr = res.map(r => ({ label: r.value, value: r.id }))
    setData(arr)
  }
  // 新增接口
  async function add() {
      if(!name) {
        message.error('请输入用户')
    }
    const res = putUser({name})
    if(res.code === 0) init();
  }
  function onSearch(index) {
      if(index !== undefined) setName(index)
  }
  // 下拉框显示，新增按钮
  function dropdownRender(menu) {
       // native 只显示菜单，不显示按钮
    if (native) return <>{menu}</>;
    return (
      <>
        {menu}
        <Divider style={{ margin: '4px 0' }} />
        <div
          style={{ padding: '4px 8px', cursor: 'pointer' }}
          onMouseDown={e => e.preventDefault()}
        >
          <a href={null} rel="noopener noreferrer" onClick={add}>
            <Icon type="plus" /> 新增用户
          </a>
        </div>
      </>
    );
  }
  return (
    <Select
      allowClear={allowClear}
      labelInValue={labelInValue}
      showSearch
      placeholder="请选择所属应用"
      notFoundContent=""
      optionFilterProp="children"
      value={value}
      filterOption={(input, option) => option.props.children.includes(input)}
      dropdownRender={menu => dropdownRender(menu)}
      onSearch={onSearch}
      onChange={onChange}
    >
      {
        data.map(r => <Option value={r.value} key={r.value}>{r.label}</Option>)
      }
    </Select>
  )
}
export default SelectUser;

父组件调用

<Form.Item label="应用场景">
  {getFieldDecorator('scene', {
    // initialValue: data.sceneId, labelInValue={false}
    initialValue: data.sceneId ? { key: data.sceneId } : undefined,
    rules: [{ required: true, message: '请选择场景' }],
  })(<SelectUser native labelInValue allowclear/>)}
</Form.Item>

Select placeholder不显示

select的 value默认值，必须是 undefined 才显示 placeholder
initialValue: data.id ? { key:data.id } : undefined