组件化-select list

(一)page

1 引入ant message 组件
2 定义state中接收数据
state = {
stateData:[],
};
3 请求数据
componentDidMount() {
  this.queryStateSelectList()
}

queryStateSelectList = ()=>{
    const { dispatch } = this.props;
    dispatch({
      type: 'TaskManage/StateSelectList',
      payload: '',
      callback:(res)=>{
        if(res.code == 20000){
          this.setState({stateData:res.data})
        }else{
          message.error(res.msg)
        }
      }
    });
  }

{this.renderSelectOption(stateData,'key','val')}
renderSelectOption = (data,key,val)=>{
let arr = []
if(data && data.length > 0){
data.map((item)=>{
arr.push(<Option value={item[key]} key={item[key]}>{item[val]}</Option>)
})
}
return arr;
}




(二)modal
*StateSelectList({ payload, callback }, { call }) {
const response = yield call(StateSelectListReq, payload);
if (callback) callback(response);
},

(三)services

export async function StateSelectListReq() {
  return request('/task/types');
}
 

猜你喜欢

转载自www.cnblogs.com/sunxiaolong905417077/p/12187462.html