react對接口-後續篇

時間 2019-11-24

標籤 react 接口續篇欄目 React 简体版

原文原文鏈接

這下的3個接口的調用，前面的步驟跟獲取數據同樣的，只在當前頁作改變api

1、刪除數據

第一種寫法

寫在函數裏面，哪裏須要調用
  del=(id)=>{
    const {dispatch} = this.props;
    const later = dispatch({
      type:'smartRestaurant/delClassificationFood',
        payload:{ //payload裏面寫成對象的形式
        id,
      },
    });
    later.then(()=>{// 刪除以後頁面要刷新，還得從新獲取數據
      this.componentDidMount()
    })
  }

複製代碼

第二種寫法

isInteger = obj => {
    return obj % 1 === 0;
  };

  del = id => {
    const { dispatch } = this.props;
    const later = dispatch({
      type: 'cityInformation/delAnnouncement',
      payload: {
        id,
      },
    });
    later.then(pdata => {
      const { page, pageNum, data } = this.state;
      if (this.isInteger([data.pagination.total - 1] / pageNum)) {
        this.setState({
          page: page - 1,
        });
      }
      if (JSON.parse(pdata).code === 1) {
        this.componentDidMount();
      }
    });
  };
複製代碼

// Popconfirm 在頭部要記得引用，只有確認是否刪除菜調用刪除接口
   {
        title: '操做',
        dataIndex: 'operation',
        render: (text,record) => (
          <div>
            <Button onClick={()=>this.showModal(2,record)} icon='edit' size='small' />
            <Divider type="vertical" />
            <Popconfirm title="確認是否刪除?" onConfirm={()=>this.del(record.id)} >
              <Button icon='delete' size='small' />
            </Popconfirm>,

          </div>
        ),
      },
複製代碼

2、添加數據

均是對錶單進行操做數組

這是圖片上傳的時候要寫的函數
normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  handleImgChange = (info) => { // info是開始就有的一個對象，若是有問題控制檯打印一下
    if (info.file.status === 'uploading') { // 若是選擇的圖片還在加載中，執行這裏
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') { // 若是已經加載完成了，執行這裏
      const { response:{ data } }=info.file; //返回的data裏面包含了生成的圖片地址url
      this.setState({
        url:data[0], // data是一個數組，我門的圖片地址是data[0]
        loading: false, //圖片顯示了，loading天然要關閉
      });
    }
  };
複製代碼

這裏有圖片上傳
newHashslinger (){
    const put=(e)=>{ //把put寫在裏面的做用是，在當前函數裏面調用能夠不寫成{this.put}
      const { form:{validateFields}, dispatch } =this.props; // validateFields保存當前頁面全部表單的value值
      e.preventDefault();
      validateFields((err, value) => { 
      // err表示modal裏面沒輸入完成的，value是modal完成的，err若是爲空，證實value裏面是所有完成了
        const esvalue=value; // value就是getFieldDecorator裏面的第一個參數
        if (!err) { // 只有err爲空，說明新增表單數據完成了，那麼modal點擊確認時調接口
          const {url}=this.state;// 切記url在state裏面要賦初始值，
          esvalue.img=url; // 這裏的url是地址，是在本地選擇圖片時就會自動調的接口，根據圖片信息生成的圖片地址
          const later=dispatch({
            type: 'smartRestaurant/addMenuClassification',
            payload: esvalue,
          });
          later.then(()=>{
            this.setState({
              newVisible:false, // 只有新增成功以後modal關閉
            })
            this.componentDidMount(); // 一樣數據會從新獲取
          })
        }
      });
    };
複製代碼

const FormItem = Form.Item; //只要是表單，這個就得寫
複製代碼

const RadioGroup = Radio.Group;
    const { getFieldDecorator } = this.props.form;  //getFieldDecorator這個算裝飾器，起雙向綁定的做用
    const formItemLayout = { // 這是對modal樣式控制，一行總共24個span
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
複製代碼

// accessToken是請求頭，在state裏面也要賦初始值accessToken: localStorage.getItem('accessToken'),
// accessToken是當登陸調用login接口時，就會自動保存下來的
const {url,loading,accessToken}=this.state; 
複製代碼

上傳圖片

const uploadButton = ( 
    <div>
      <Icon type={loading ? 'loading' : 'plus'} /> // 若是選擇了圖片，圖片還在加載就顯示loading圖標，不然顯示plus加號圖標
      <div className="ant-upload-text">Upload</div>
    </div>
  );
  
複製代碼

return (
      <Modal
        destroyOnClose // modal關閉，子元素自動銷燬
        title="新增"
        visible={this.state.newVisible}
        onOk={put} // put寫在newHashslinger的好處就是如今調用不要加this
        onCancel={this.handleCancel}
      >
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout} // 樣式控制
            label="分類名稱"
          >
            {getFieldDecorator('name', {
              rules: [{
                required: true, message: '請輸入正確名稱',
              }], // rules 就是輸入框的限制條件，沒達到要求就會顯示message的內容
            })(
              <Input />,// 就是當前的組件
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="圖片"
          >
            {getFieldDecorator('img', {
              valuePropName: 'fileList',
              rules: [{
                required: true, message: '菜品圖片',
              }],
              getValueFromEvent:this.normFile, // 這裏是固定寫的，圖片上傳就得這樣寫
            })(
              <Upload
                action="/api/user_agency/system/file/upload/upload_image" //只要選擇了圖片，就會自動調這個接口，生成一個圖片地址，url
                listType="picture-card"
                showUploadList={false}
                onChange={this.handleImgChange} // 選擇圖片調用的函數
                name='image'
                headers={
                  {
                    Authorization: accessToken, // 固定寫法，請求頭
                  }
                }
              >
                {url ? <img src={url} alt='圖片路徑' width={130} /> : uploadButton } // 圖片若是選擇好了，就是url存在，執行後面的，佛諾澤執行後面的uploadButton
              </Upload>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  };
  
複製代碼

3、修改數據

修改一個特殊的地方，那就是修改的時候原始數據是出如今輸入框的，這是與添加不一樣的地方bash

// 由於這裏用一個showModal函數控制兩個modal的顯示與否
  showModal = (index,data) => {
    if(index===1){
      this.setState({
        newVisible: true,
      });
    }else{
      this.setState({
        editData: data,
        url:data.img, // 由於修改的時候推按比較特殊，得這樣寫
        editVisible: true,

      });
    }
  };
  handleCancel = () => {
    this.setState({
      url:'',// 取消modal的同時,圖片也要清空
      newVisible: false,
      editVisible: false,
    });
  };
     
複製代碼

// 在新增的地方一樣這樣綁定一個事件
   {
        title: '操做',
        dataIndex: 'operation',
        render: (text,record) => (
          <div>
            <Button onClick={()=>this.showModal(2,record)} icon='edit' size='small' />// 此處調用showModal
            <Divider type="vertical" />
            <Popconfirm title="確認是否刪除?" onConfirm={()=>this.del(record.id)} >
              <Button icon='delete' size='small' />
            </Popconfirm>,

          </div>
        ),
      },
複製代碼

// editData: {},在state 裏面賦初始值
 editTable = () =>{
    const { editData } = this.state;  // editData 選中的某條數據的所有，表明單條數據的所有信息
    const put=(e)=>{
      const {form:{validateFields},dispatch}=this.props;
      e.preventDefault();
     validateFields((err, values) => {
       const esvalue = values;
        if (!err) {
          esvalue.id = editData.id; // 由於要得到 id
          const later = dispatch({
            type: 'smartRestaurant/upTableManagement',
            payload:esvalue,
          });
          later.then(()=>{
            this.setState({
              editVisible: false,
            });
            this.componentDidMount()
          })
        }
      });
    };
複製代碼

// modal層的不一樣之處，存在初始數據initialValue
 <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout} // 樣式控制
            label="分類名稱"
          >
            {getFieldDecorator('name', {
              rules: [{
                required: true, message: '請輸入正確名稱',
              }], // rules 就是輸入框的限制條件，沒達到要求就會顯示message的內容
              initialValue: editData.name,
            })(
              <Input />,// 就是當前的組件
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="圖片"
          >
            {getFieldDecorator('img', {
              valuePropName: 'fileList',
              rules: [{
                required: true, message: '菜品圖片',
              }],
              getValueFromEvent:this.normFile, // 這裏是固定寫的，圖片上傳就得這樣寫
              initialValue:[{}],
            })(
              <Upload
                action="/api/user_agency/system/file/upload/upload_image" //只要選擇了圖片，就會自動調這個接口，生成一個圖片地址，url
                listType="picture-card"
                showUploadList={false}
                onChange={this.handleImgChange} // 選擇圖片調用的函數
                name='image'
                headers={
                  {
                    Authorization: accessToken, // 固定寫法，請求頭
                  }
                }
              >
                {url ? <img src={url} alt='圖片路徑' width={130} /> : uploadButton } // 圖片若是選擇好了，就是url存在，執行後面的，佛諾澤執行後面的uploadButton
              </Upload>
            )}
          </FormItem>
複製代碼

最後必定要將兩個modal渲染到頁面上app

{this.newHashslinger()}
{this.editHashslinger()}
複製代碼

在此，基於ant-Design調接口篇已經完成啦。ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。