antd Select下拉選單動態新增option裡的內容，通過form表單繫結select選中的值

提供一個公共的方法，每次只需去呼叫這個方法就行了

//這裡是示例資料格式
let giftScope =[
 {
 code:200,id:1,name:"張三"
 },{
 code:300,id:2,name:"李四"
 },{
 code:400,id:3,name:"王五"
 },{
 code:500,id:4,name:"趙六"
 },]

// 提供了一個在select裡面新增公用Option內容的方法 
//第一個引數為原資料（array） 
//第二個為value----值為當前輸入框內容對應的id或code唯一標識(不能為number會報錯) 
//第三個為內容
 const renderOption = (arr,code,name) => arr ? arr.map( (item,index)=>{
 return (<Option key={index+item[code]} value={ typeof(item[code]) === 'number' ? item[code].toString() : item[code]}>{item[name]}</Option>)
 }) : null
 <Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>

配合form表單使用

//parameter可以是id，也可以是code或者其他需要的欄位，呼叫renderOption方法時更改第二個引數即可
//通過form表單API獲取到所有value值的parameter就為繫結的id或者code
   <Form.Item>
   {getFieldDecorator('parameter',{
    rules: [{ required: false,message: '請選擇' }],})(
    <Select mode="tags" >{renderOption(giftScope,'name')}</Select>,)}
   </Form.Item>

補充知識：關於antd Select選擇器

根據伺服器端的值動態渲染 select的option值

在moddels裡面直接處理資料

*getSiteOptionsAdmin({ payload },{ call,put }) {
   try {
    const { data } = yield call(notice.getSiteOptionsAdmin,payload);
    if (data.code === 200) {
     const menudata = [];
     menudata.push(<Select.Option key={0} value="0">全部</Select.Option>);
     for (let i = 0; i < data.info.length; i++) {
      menudata.push(
       <Select.Option
        key={data.info[i].id}
        value={data.info[i].id.toString()}
       >
        {data.info[i].title}
       </Select.Option>,);
     }
     yield put({ type: 'save',payload: { getSiteOptionsAdmin: menudata } });
    } else {
     message.error(data.message);
    }
   } catch (error) {
    console.log(error);
   }
  },

全部選項就是value值為0 的option值

export default connect((state) => {
 return {
  activityList: state.activity.activityList,menudata: state.notice.getSiteOptionsAdmin,};
})(Form.create()(QuestionList));

<Select 
showSearch 
placeholder="請選擇站點" 
style={{ width: '160px' }} 
optionFilterProp="children" 
onChange={this.handleChange}>
 <Option key={0} value={0}> 全部</Option>
 {this.props.menudata.length > 0 ? this.props.menudata : []}
</Select>,

以上這篇antd Select下拉選單動態新增option裡的內容操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。