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

时间:2017-09-26 15:01:15

标签: javascript reactjs ecmascript-6 draftjs

我正在尝试在简单的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应用中的密钥时,我收到以下错误:

Error display

它也没有删除任何文字,但我收到以下错误:

  

TypeError:this.getImmutable(...)未定义

你知道为什么吗?

1 个答案:

答案 0 :(得分: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