javascript - Draftjs: TypeError: TypeError: this.getImmutable(...) 未定义

Question

我正在尝试在简单的 Draftjs 编辑器上应用自定义装饰器:

import React from 'react'; 
import {Editor, EditorState, RichUtils} from 'draft-js';
import EditorToolbar from './EditorToolbar.js';
import BoldProcessor from './processors/BoldProcessor.js';
import OppaiDecorator from './oppaiDecorator/OppaiDecorator.js';
import './AdvancedEditor.css';

class AdvancedEditor extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      toolbarItems: [ [ new BoldProcessor(this.eventEmitter) ] ],
      decorators: [
        new OppaiDecorator(),
      ]
    };  
  }

  onChange(editorState){
    let state=editorState;

    this.state.decorators.forEach((decorator) => {
     const tmpstate=decorator.apply(state);
     if(tmpstate){
      state=tmpstate;
     }
    });

    this.setState({editorState:state});
  } 

  handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(editorState, command);

    if (newState) {
      this.onChange(newState);
      return 'handled';
    }

    return 'not-handled';
  }

  render() {
    return (
      <div className="editorFull">
        <EditorToolbar items={this.state.toolbarItems} editorState={this.state.editorState}/>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange.bind(this)}
          handleKeyCommand={this.handleKeyCommand}
        />
      </div>
    );
  }
}

export default AdvancedEditor;

我这样应用装饰器:

import {EditorState, CompositeDecorator} from 'draft-js';
import OppaiItem from './OppaiDecorator.js';

class OppaiDecorator {
    constructor(){
        this.decorator=new CompositeDecorator([
            {
                strategy:this.oppaiMatch,
                component: OppaiItem
            }
        ]);
    }

    oppaiMatch(contentBlock, callback, contentState){
        this.__findWithRegex(/\s+oppai\s+/,contentBlock,callback);
    }

    __findWithRegex(regex, contentBlock, callback) {
        const text = contentBlock.getText();
        let matchArr=regex.exec(text)
        let start;
        if (matchArr !== null) {
          start = matchArr.index;
          callback(start, start + matchArr[0].length);
        }
    }

    apply(state) {
        if(state){
            return EditorState.apply(state,{decorator:this.decorator});
        }
    }
}

export default OppaiDecorator;

问题是，当我在 create-react-app 应用程序上按退格键或删除键时，出现以下错误:

它也不会删除任何文本，但我收到以下错误:

TypeError: this.getImmutable(...) is undefined

你知道为什么吗？

Answer 1

onChange 不会生成 editorState，而是生成 rawDraftContentState。尝试更改为 onEditorStateChange:

    <Editor
      editorState={this.state.editorState}
      onEditorStateChange={this.onChange.bind(this)}
      handleKeyCommand={this.handleKeyCommand}
    />

来源:https://github.com/jpuri/react-draft-wysiwyg/issues/255