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>