Draftjs超字符数文本高亮异常：输入字符重复添加问题求助

我之前在做Draft.js文本编辑器的字符超限提示功能时，也碰到过一模一样的输入重复问题！大概率是你的addOverLimitFeedback函数在处理editorState时，没有遵循Draft.js的不可变状态更新规则，或者不小心触发了额外的内容变更循环。下面给你拆解问题和解决方案：

核心问题分析 #

Draft.js的editorState是基于Immutable.js实现的不可变对象，如果你的函数直接修改了原状态，或者在添加样式时意外改动了文本内容，就会导致onChange被重复触发——新输入的字符会被处理函数再次“追加”一次，最终出现重复。

具体修复方案 #

1. 严格使用Draft.js官方API生成新状态 #

绝对不能直接修改原editorState或contentState，必须用官方提供的方法生成不可变的新状态，比如EditorState.push()、Modifier.applyInlineStyle()等。

2. 避免触发内容变更循环 #

你的onChange回调是接收用户输入后的新状态，再处理样式后更新组件状态。如果处理函数里不小心修改了文本内容（而非仅样式），就会再次触发onChange，形成循环导致字符重复。

3. 修正后的addOverLimitFeedback示例 #

下面是一个正确的实现模板，只处理样式不改动内容，且严格遵循不可变更新规则：

import { EditorState, ContentState, Modifier, SelectionState } from 'draft-js';

addOverLimitFeedback = (editorState) => {
  const MAX_CHAR_LIMIT = 100; // 替换成你的字符限制值
  const contentState = editorState.getCurrentContent();
  const plainText = contentState.getPlainText('');
  const currentLength = plainText.length;

  // 情况1：未超过限制，移除之前的超限样式
  if (currentLength <= MAX_CHAR_LIMIT) {
    // 全选内容移除超限样式
    const fullSelection = contentState.getSelection().merge({
      anchorOffset: 0,
      focusOffset: plainText.length,
    });
    const newContent = Modifier.removeInlineStyle(
      contentState,
      fullSelection,
      'TEXT_OVER_LIMIT'
    );
    // 生成新的editorState，指定changeType为样式变更
    return EditorState.push(editorState, newContent, 'apply-inline-style');
  }

  // 情况2：超过限制，给超限部分添加样式
  // 找到最后一个区块（假设文本在一个区块里，多区块需要调整逻辑）
  const lastBlock = contentState.getLastBlock();
  const lastBlockKey = lastBlock.getKey();
  // 计算超限部分的选区：从限制位置到文本末尾
  const overLimitSelection = new SelectionState({
    anchorKey: lastBlockKey,
    anchorOffset: MAX_CHAR_LIMIT,
    focusKey: lastBlockKey,
    focusOffset: lastBlock.getLength(),
  });

  // 先移除所有已有的超限样式，再给新的超限部分添加
  const contentWithoutOldStyle = Modifier.removeInlineStyle(
    contentState,
    contentState.getSelection().merge({
      anchorOffset: 0,
      focusOffset: plainText.length,
    }),
    'TEXT_OVER_LIMIT'
  );
  const newContent = Modifier.applyInlineStyle(
    contentWithoutOldStyle,
    overLimitSelection,
    'TEXT_OVER_LIMIT'
  );

  // 生成新的editorState，注意changeType要选对，避免触发内容变更
  return EditorState.push(editorState, newContent, 'apply-inline-style');
};

4. 额外注意事项 #

• 确保你已经在Draft.js的styleMap里定义了TEXT_OVER_LIMIT样式：

  const styleMap = {
    TEXT_OVER_LIMIT: {
      color: 'red',
      backgroundColor: '#ffebee',
    },
  };
  

• 在onChange里，一定要基于传入的editorState生成新状态，不要复用之前的组件状态：

  onChange = (editorState) => {
    const processedState = this.addOverLimitFeedback(editorState);
    this.setState({ editorState: processedState });
  };
  

内容的提问来源于stack exchange，提问作者newpatriks