【react】【antd】自定义下拉选择框，多选，选择结果逗号隔开

Antd中的Select选择框的多选模式，选择结果是利用Tag标签来显示的，但是当前业务需求是选择结果逗号隔开，只能利用Select和Input组合出一个自定义组件，Input定位到Select的选择框上

部分代码如下：

1、利用Select的多选模式

	state = {
		isDutyDeptShow: false, //是否显示事业部责任处室下拉框
		dutyDeptValue: ''
	}
	
    onDutyDeptClick = () => {
        this.setState({
            isDutyDeptShow: true
        })
    }

    onDutyDeptBlur = () => {
        this.setState({
            isDutyDeptShow: false
        })
    }

	handleChange = (value, option) => {
	    this.setState({
	      dutyDeptValue: value
	    })
	  }

	// render
	<Form>
		<Form.Item label="事业部责任处室">
			{getFieldDecorator('DutyDeptCode')( 
				<Select 
					onBlur={this.onDutyDeptBlur}
					onChange={this.handleChange}
		            open={isDutyDeptShow}
		            mode="multiple" 
		        >
		        {
		            DutyDeptCodeList ? DutyDeptCodeList.map((value, index) => {
		            	return <Option value={value.Value} key={value.Value}>{value.Name}</Option>
		            }) : ''
		        }
		        </Select>
			)}
			<Input 
				value={this.state.dutyDeptValue} 
				placeholder='请选择事业部责任处室'  
				onClick={this.onDutyDeptClick} 
				onFocus={this.onDutyDeptClick} 
				onBlur={this.onDutyDeptBlur}
			/>
		</Form.Item>
	</Form>

2、自定义Select的选择方法

	state = {
		isDutyDeptShow: false, //是否显示事业部责任处室下拉框
		dutyDeptArr: []
	}
	
    onDutyDeptClick = () => {
        this.setState({
            isDutyDeptShow: true
        })
    }

    onDutyDeptBlur = () => {
        this.setState({
            isDutyDeptShow: false
        })
    }

	onDutyDeptSelect = (LabeledValue, option) => {
        const obj = {}
        obj.Name = option.props.children
        obj.Value = LabeledValue
        const arr = this.state.dutyDeptArr
        arr.push(obj)
        this.setState({
            dutyDeptArr: arr
        })
    }

    onDutyDeptDeselect = (value) => {
        const arr = this.state.dutyDeptArr
        arr.forEach((v,i)=>{
            if(v.Value === value)
                arr.splice(i,1)
        })
        this.setState({
            dutyDeptArr: arr
        })
    }

	// render
	<Form>
		<Form.Item label="事业部责任处室">
			{getFieldDecorator('DutyDeptCode')( 
				<Select 
					onBlur={this.onDutyDeptBlur}
		            onSelect={this.onDutyDeptSelect}
		            onDeselect={this.onDutyDeptDeselect}
		            open={isDutyDeptShow}
		            mode="multiple" 
		        >
		        {
		            DutyDeptCodeList ? DutyDeptCodeList.map((value, index) => {
		            	return <Option value={value.Value} key={value.Value}>{value.Name}</Option>
		            }) : ''
		        }
		        </Select>
			)}
			<Input 
				value={this.state.dutyDeptArr.length>0 ? this.state.dutyDeptArr.map(v=>v.Name).toString() : ''} 
				placeholder='请选择事业部责任处室'  
				onClick={this.onDutyDeptClick} 
				onFocus={this.onDutyDeptClick} 
				onBlur={this.onDutyDeptBlur}
			/>
		</Form.Item>
	</Form>