React中使用contentEditable光标在最前方的问题

最新推荐文章于 2024-08-09 08:11:56 发布

张开心

最新推荐文章于 2024-08-09 08:11:56 发布

阅读量2.8k

点赞数 1

分类专栏：屠龙文章标签： javascript 前端开发语言 react.js

本文链接：https://blog.csdn.net/qy_99/article/details/126509134

版权

屠龙专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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还有很多坑，当你感觉快要起飞是，就会狠狠地摔入低谷。