draft.js编辑器开发笔记

一：焦点控制

需求：光标在输入框内的时候，点击上方的格式按钮，不能让输入框失去焦点

解决方案：将格式按钮事件绑定在onmousedown事件上，并阻止默认事件。不要用click事件

二：父子组件通信

需求：父组件调用字组件内的方法

方案：通过this.refs.name.方法名  实现调用

 

三：位置自适应的提示语组件：

需求：

方案：

分离为Tips组件，接收如下四个props：

1. parentDom：相对定位的父级（即包裹Tips组件的父级元素）
2. targetDom：响应提示语的dom标签（此处即button列表）
3. topTune：高度微调值
4. leftTune：left微调值（即响应提示组件的Dom标签的宽度）
5. title：提示语

难点：

1. Tips组件居中问题：需要获取到不同提示语下的的tips组件中，span元素的宽度，然后结合leftTune，计算出实际的left值，实现居中；
2. 小三角居中问题：通过after实现的小三角，利用calc属性实现居中

组件核心代码：