基于antd design的Select组件自定义MySelect组件

1、create-react-app 新建项目my-select-demo

2、入口文件index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App.jsx'

ReactDOM.render(<App />, document.getElementById('root'))

3、自定义MySelect组件

　　MySelect.jsx

import React from 'react'
import { Row, Select } from 'antd'

const Option = Select.Option

export default function MySelect(props) {
    const { name, selectOptions, myRef, setSelectValue } = props
    let {defaultValue} = props
    // 没有传默认value值，选中第一个选项
    if (!defaultValue && (selectOptions && selectOptions.length > 0)) {
        defaultValue = selectOptions[0]
    }
    return getSelectItem(name, selectOptions, defaultValue, myRef, setSelectValue)
}

/**
 * 返回一个下拉选择框
 * @param {string} name fieldName 
 * @param {Array} selectOptions 可供选择项
 * @param {string} defaultValue 默认值
 * @param {function} myRef 组件的引用
 * @param {function} setSelectValue 获取select组件的value值
 */
function getSelectItem(name, selectOptions, defaultValue, myRef, setSelectValue) {

    return (
        <Row>
            <Select placeholder={`please select ${name}`} name={name} value={defaultValue} ref={myRef} onSelect={selectHandler}>
                {selectOptions.map(item => {
                    return <Option value={item} key={item} selected={item === defaultValue}>{item}</Option>
                })}
            </Select>
        </Row>
    )

    function selectHandler(value) {
        setSelectValue(value)
    }

}

4、如何使用自定义的组件

　　App.jsx

import React from 'react'
import { Button, Modal, Icon, Form } from 'antd'
import "antd/dist/antd.css";

import MySelect from './MySelect.jsx'

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            array: ['aaa', 'bbb', 'ccc']
        }
    }

    render() {
        return (
            <div>
                <Button type="primary" onClick={this.buttonClickHandler}>点击弹出对话框</Button>
            </div>
        )
    }

    buttonClickHandler = () => {
        Modal.confirm({
            title: 'Options',
            icon: <Icon type="info-circle" />,
            closable: true,
            content: (
                <Form layout="horizontal">
                    {/* 设置了默认value值 */}
                    {/* <MySelect name='instrument_id' selectOptions={this.state.array} defaultValue='bbb'
                        myRef={select => this.mySelect = select} setSelectValue={this.setMySelectValue} /> */}

                    {/* 没有设置默认value值 */}
                    <MySelect name='instrument_id' selectOptions={this.state.array}
                        myRef={select => this.mySelect = select} setSelectValue={this.setMySelectValue} />
                </Form>
            ),
            okText: 'Confirm',
            cancelText: 'Cannel',
            onOk: this.comfirmHandler
        })
    }

    // 更改了<MySelect>选项后更新下拉选择组件的value
    setMySelectValue = value => {
        this.mySelect.value = value
    }
    
    // this.mySelect.props.value保存的是默认的value值, readonly
    comfirmHandler = () => {
        console.log(`this.mySelect.value=${this.mySelect.value}`)
        console.log(`this.mySelect.props.value=${this.mySelect.props.value}`)
        // 获取<MySelect>下拉选择组件的value
        const mySelectValue = this.mySelect.value ? this.mySelect.value : this.mySelect.props.value
        console.log(`mySelectValue=${mySelectValue}`)
    }
}

5、效果

 6、注意

　　1）this.select引用名.props.value 保存的是默认的value值, readonly

　　2）如果更新了选项（非默认值），则通过setMySelectValue()将value值保存在 this.select引用名.value