JS 踩坑

版权声明：crystalLee https://blog.csdn.net/baidu_33591715/article/details/82054216

e和this的区别

（今天在尝试antd插件使用的时候尝试了这个问题，算踩坑了吧。。。）

1.e.target.value获取的就是你选择接受事件的元素输入的或者选择的值。

参数e接收事件对象。

而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

2. this就是指向当前事件所绑定的元素。

3.e.target.value和this的区别：

1.先弄清楚e.target指向哪个元素，然后看看这个元素的value属性的值就可以得到了。初学者一般会把e.target和this弄混，搞不懂这两个具体指向哪个元素。

简单来说，this就是指向当前事件所绑定的元素，而e.target指向事件执行时鼠标所点击区域的那个元素。容易搞不懂的地方是，初学者会认为当前事件所绑定的元素不就是鼠标所点击的那个元素嘛，这时候就要看看事件绑定的元素内部有没有子元素了，如果有子元素的话e.target指向这个子元素，如果没有，e.target和this都指向事件所绑定的元素。

打印事件

需求是局部的打印事件啦

打印页面全部：： window.print();

思路一：

写法（反正我没实现了，有好的写法可以借鉴一下子不~~）：

printMail=()=>{
    const el = findDOMNode(this);
    console.log('el',el.children[0].children[0].children[0].children[0].children[1].innerHTML)
    console.log('window',window.document.body.innerHTML)
    let oldHtml = window.document.body.innerHTML;
    let printHtml = el.children[0].children[0].children[0].children[0].children[1].innerHTML;
    window.document.body.innerHTML = printHtml;
    window.print();
    window.document.body.innerHTML = oldHtml;
  }
  printBtn=()=>{
    return (
      <div>
        <Button onClick={()=>{this.printMail()}}>打印该邮件</Button>
        <Button>关闭该邮件</Button>
      </div>
    )
  }

以下是我实现了的方法，分享一下：

printMail=()=>{
    const el = findDOMNode(this);
    let preContent = el.children[0].children[0].children[0].children[0].children[1].innerHTML || 
    window.__preContent || '';

    let printWindow = window.open('打印窗口','_blank');
    printWindow.document.write(preContent);
    printWindow.document.close();
    printWindow.print();
    printWindow.close();
  }