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