1,给div添加contentEditable可变成可输入文本框,但是在react中会报错,需要添加suppressContentEditableWarning 属性。
2,再React中,想要实现数据的绑定,需要再div添加dangerouslySetInnerHTML,
他接受一个对象,value可为dom,可为文本。第一对{}是React中jsx语法。
dangerouslySetInnerHTML={{ __html: value }}
3,但发现div中数据进行绑定后,就会发现当输入时,光标会一直出现在文本的最前方,无法正常输入。是因为当绑定的数据发生改变时,导致页面刷新,使光标无法聚焦
解决思路:看了很多文章,最后在面向谷歌浏览器找到解决方法,当div中绑定的数据发生变化时,阻止页面更新。这就需要用到,shouldComponentUpdate钩子:
子组件代码:
import React, { Component } from 'react';
class EditNode extends Component {
constructor(props) {
super(props);
this.ref = React.createRef();
this.onChange = this.onChange.bind(this);
}
onChange() {
const html = this.ref.current.innerHTML;
if (this.props.onChange && html !== this.lastHtml) {
this.props.onChange(html);
}
this.lastHtml = html;
}
shouldComponentUpdate(nextProps) {
return nextProps.value !== this.ref.current.innerHTML;
}
componentDidUpdate() {
if (this.props.value !== this.ref.current.innerHTML) {
this.ref.current.innerHTML = this.props.value;
}
}
render() {
const {value } = this.props;
return (
<div contentEditable="true"
suppressContentEditableWarning
ref={this.ref}
dangerouslySetInnerHTML={{ __html: value }}
onInput={this.onChange}
onBlur={this.onChange}
/>
);
}
}
export default EditNode;
现在只是解决了数据绑定时,光标问题。。。。
例如在div中回车事件会添加标签:<div><br></div>。
如果在div中插入dom,删除dom是无法用onchange监听。
添加字数统计功能。需要将文本中的标签转换。
.......等等等等,
还会出文章解决所遇到的问题
这个contentEditable还有很多坑,当你感觉快要起飞是,就会狠狠地摔入低谷。