antd Select 드 롭 다운 메뉴 동적 추가 option 의 내용 작업

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>

폼 에 맞 춰 사용

//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 선택 기
서버 쪽 값 에 따라 selection 의 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 의 내용 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.