Draftjs：类型错误：类型错误：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; 

的问题是，当我打Backspace键或在我的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