react通过下拉框选择多个，并展示在下方的方式
以备后用，直接上代码：
一、方法：
//查询学校一级部门列表async orgFirstLevelList() {let data = {schoolId:this.state.schoolId};let depList = await orgFirstLevelList(data);this.setState({depList: depList})}//删除所选部门deleteDep(index) {let {selectDepList} = this.state;selectDepList.splice(index,1);this.setState({ selectDepList });}//添加所选部门addDep(e) {let orgName = null;let { depList,selectDepList} = this.state;//判断已添加列表中是否已存在for(let i = 0;i < selectDepList.length; ++i){if(selectDepList[i].id === e[0]) {this.mesWarning('该部门已添加过了，无需重复添加')return;}}for(let i = 0;i < depList.length; ++i){if(depList[i].id === e[0]) {orgName = depList[i].orgName;break;}}selectDepList.push({id:e[0], orgName:orgName});this.setState({ selectDepList: selectDepList});this.props.form.setFieldsValue({orgId:""})}二、form及选择展示
<Form.Item label="所属部门">
{getFieldDecorator('depId', {rules: [{required: true,message: '请输入所属组织',},]})(<CascaderfieldNames={{label: 'orgName', value: 'id'}}options={depList}placeholder="请选择所属组织,支持多选"changeOnSelectonChange={(e) => this.addDep(e)}disabled={this.state.isLook}getPopupContainer={triggerNode => triggerNode.parentNode || document.body}/>)}
</Form.Item>{selectDepList.length > 0?<Col span={24}><div className="diyTag">{selectDepList.map((item,index)=>{return(<Tag key={index} id={item.id}>{item.orgName}<span onClick={() => this.deleteDep(index)}>{closeBtn}</span></Tag>)})}</div></Col>:""
}