學了一招

時間 2019-12-08

標籤學了一招简体版

原文原文鏈接

男人能夠窮，但絕對不能慫，拼我想要的，爭我沒有的，雖然我一無全部，但這只是如今！

React （css圖片路徑問題）

問題：css

react 前端要一張圖片，使用的是 css background 顯示這樣圖片前端

解決辦法：在css文件導入圖片使用 url（${ imgname }）解析圖片react

問題：（在style-components 封裝樣式組件標籤中若是要傳入一張圖片封裝組件設置背景圖片）ios

    <RecommendWrap>
                {
                    this.props.RecommendList.map((Item,index)=>{
                        return(
                                <a><RecommendItem key={Item.get('id')} imgUrl={Item.get('imgUrl')}/></a>
                            )
                    })
                }
            </RecommendWrap>

index.js

style.js

跨域請求

fetchajax

1 getFetchNews = ()=>{
2         var myFetchOption = {
3             method:'GET'
4         };
5         fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOption)
6         .then(response=>response.json())
7         .then(json=>this.setState({news:json}))
8 
9     }

axios數據庫

 1   axios({
 2                url:options.url,
 3                method:'get',
 4                baseURL:baseApi,
 5                timeout:5000,
 6                params:(options.data && options.data.params) || ''
 7            }).then((response)=>{
 8 
 9                if(options.data && options.data.isShowLoading !== false){
10                            loading = document.getElementById('ajaxLoading');
11                            loading.style.display='none';
12                     }
13 
14                 const result = response.data;
15                if (response.status == '200' && (result.data.code == 0 || result.success)) {
16                    resolve(result);
17                } else {
18                    reject(response.messsage);
19                }
20 
21            })

jsonpjson

 1 export default class Axios{
 2       static jsonp(options) {
 3         return new Promise((resolve, reject) => {
 4             JsonP(options.url, {
 5                 param: 'callback'
 6             }, function (err, response) {
 7                 if (response) {
 8                     resolve(response.txt());
 9                 } else {
10                     reject(err);
11                 }
12             })
13         })
14     }

 1     // 菜單渲染   實際是一個返回組件的函數
 2     renderMenu=(data)=>{
 3         return data.map((item)=>{
 4             if(item.children){
 5                 return (
 6                     <SubMenu title={
 7                             <span>
 8                                 <Icon type="mail" />
 9                                  <span>{item.title}</span>
10                             </span>
11                         }>
12                         { this.renderMenu(item.children) }
13                         </SubMenu>
14                 )
15             }
16             return <Menu.Item key={item.key}>{item.title}</Menu.Item>
17         })
18     }

 1 //定義一個行內樣式 放在一個變量裏面 
 2  const formItemLayout = {
 3     //label  佔幾列
 4                 labelCol:{
 5                     span:5
 6                 },
 7     //wrapper行佔幾列
 8                 wrapperCol:{
 9                     span:19
10                 }
11             }
12 
13 使用：<FormItem label="姓名:" {...formItemLayout}>

React Antd表單數據收集axios

 1 class AddUse extends React.Component{
 2         render(){
 3             const formItemLayout = {
 4                 labelCol:{
 5                     span:5
 6                 },
 7                 wrapperCol:{
 8                     span:19
 9                 }
10             }
11             const { getFieldDecorator }  =this.props.form;
12             return (
13                 <Form layout="horizontal">
14                     <FormItem label="姓名:" {...formItemLayout}>
15                         {
16                             getFieldDecorator('usename',{
17                                 initialValue:''
18                             })(
19                                 <Input style={{ width: 160 }} value="員工姓名"/>
20                             )
21                         }
22                     </FormItem>
23                   <FormItem label="年齡:" {...formItemLayout}>
24                      {
25                          getFieldDecorator('useage',{
26                              initialValue:''
27                          })(
28                              <Input style={{ width: 50 }} value="員工年齡"/>
29                          )
30                      }
31                  </FormItem>
32                  <FormItem label="籍貫:" {...formItemLayout}>
33                     {
34                         getFieldDecorator('usejiguan',{
35                             initialValue:''
36                         })(
37                             <Input style={{ width: 130 }} value="員工籍貫"/>
38                         )
39                     }
40                 </FormItem>
41                 </Form>
42             );
43         }
44     }
45     AddUse = Form.create({})(AddUse);

返回表單

1 //調用表單並收集數據      ref的封裝方法
2  <AddUse wrappedComponentRef={(formData)=>{
3            this.cityForm = formData
4   }}/>

表單數據瘋長的方法 more api

1.新增數據例：註冊新增一個數據 onSubmit跨域

2.查詢數據例：過濾數據經過提交上去的parmas （默認顯示的數據，經過輸入params 拿着這個params 再次請求api 獲取新的符合 params的數據） filterSubmit

3.modal 數據表單獲取數據值詳情請看上面的React Antd 表單數據收集

根據數據庫數字作一個數字字典

  getState = (state)=>{
      return{
        '1':'鹹魚一條',
        '2':'風華正茂',
        '3':'北大才子一條',
        '4':'百度Seo職員'
      }[state]
    }



<FormItem label="狀態:" {...formItemLayout}>
    {
          type == 'detail' ? this.getState(useInfo.state) :
          getFieldDecorator('state',{
          initialValue:useInfo.state
         })(
         <Select style={{ width: 160 }}>
     　　　　 <Option value={1}>入職一個月</Option>
             <Option value={2}>入職3個月</Option>
             <Option value={3}>入職半年</Option>
             <Option value={4}>正式員工</Option>
         </Select>
         )
      }
 </FormItem>