antd Selectプルダウンメニューにoptionの内容を動的に追加して操作します。

antd Selectドロップメニューは、オプトインの内容を動的に追加し、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>

フォームに合わせる

//parameter   id，    code         ，  renderOption            
//  form  API     value  parameter     id  code
   <Form.Item>
   {getFieldDecorator('parameter', {
    rules: [{ required: false, message: '   ' }],
     })(
    <Select mode="tags" >{renderOption(giftScope,'id','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のオプト値です。

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の内容を追加して操作します。つまり、小編集は皆さんのすべての内容を共有しています。参考にしていただければと思います。よろしくお願いします。