繁体   English   中英

如何在draft.js中将道具传递给装饰器的策略功能

How to pass props to strategy function for decorator in draft.js

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个用于装饰器的策略函数,我想将道具传递给我尝试过以下代码的策略函数,但它使我无法读取未定义的属性道具

const  highlightWorngWords = (contentBlock, callback , props  )  => {
let text = contentBlock.getText();
let worngWords =  props.errorWordslist ? props.wongwords : []  ;
console.log('wong words', worngWords);  
let start ; 
worngWords.forEach(word => {
  start = text.indexOf(word);
  if (start !== -1) {
    callback(start, start + word.length);
   }
 })
}

道具只是从mapStateToProps中获取的一个单词数组,我确实尝试在函数内部赋值,并且它可以工作,但是当我想将道具传递给函数时,它将不起作用。将道具传递给它

import React, { Component  , Fragment} from 'react';
import { connect } from 'react-redux';
import * as actionCreators from '../../store/actions/index';
import Footer from '../Footer/Footer';
import { Editor, EditorState , CompositeDecorator   } from 'draft-js';
import HighlightedWords   from './MyComponent'
var  h2p  = require('html2plaintext');




class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { 
          editorState: EditorState.createEmpty(compositeDecorator),
          subjectTitle: "",
      } 
      this.handleChange = this.handleChange.bind(this);
      this.animEditor = this.animEditor.bind(this);

    }

    handleChange =  (editorState) =>  {
      let TextValue = editorState.getCurrentContent().getPlainText();
      this.setState({
        editorState,
      });
      var text =  h2p(editorState.getCurrentContent().getPlainText());
      console.log("satet" , text);
      this.props.onChangeText(text);
      this.props.onSpellCheck(text); 
    }


    return(
    <Fragment>
        <main id="main-container" className="main_container">
        <section data-simplebar="init" id="editor-wrap" className="editor_wrap" ss-container='true'>

          <div 
           id="dhad-editor" 
           className="dhad_editor"  
          >
          <Editor
                  editorState={this.state.editorState}
                  onChange={this.handleChange} 
          />
          </div>
        </section>      
      </main>

    </Fragment>
    );
 }
}   
const  highlightWorngWords = (contentBlock, callback)  => {
  let text = contentBlock.getText();
 let worngWords =  this.props.errorWordslist ? this.props.errorWordslist:[];
  console.log('wong words', worngWords);  
  let start ; 
  worngWords.forEach(word => {
    start = text.indexOf(word);
    if (start !== -1) {
      callback(start, start + word.length);
     }
   })
}
const compositeDecorator = new CompositeDecorator([
  {
    strategy: highlightWorngWords.bind(this), //here
    component: HighlightedWords ,
   }
 ]);
const mapStateToProps = state => {
  return {
      text: state.edi.text ,
      errorWordslist: state.edi.errorWordslist,
      correctionsList: state.edi.correctionsList 
  };
};

const mapDispatchToProps = dispatch => {
return {
    onStart: () => dispatch(actionCreators.start()),
    onChangeText: (value)   => dispatch(actionCreators.TextChange(value)),
    onSpellCheck: (word)    => dispatch(actionCreators.ErorrWordsList(word)),

}
};



export default connect( mapStateToProps , mapDispatchToProps ) (Main);
1 个回复

道具只是我从mapStateToProps得到的单词数组

在组件类中添加函数,并保留箭头函数声明以自动绑定组件上下文。

highlightWorngWords = (contentBlock, callback)  => {
let text = contentBlock.getText();
let worngWords =  this.props.errorWordslist ? this.props.wongwords : []; //HERE
console.log('wong words', worngWords);  
let start ; 
worngWords.forEach(word => {
  start = text.indexOf(word);
  if (start !== -1) {
    callback(start, start + word.length);
   }
 })
}

然后修复构造函数中的装饰器声明以指向this.highlightWorngWords

const compositeDecorator = new CompositeDecorator([
  {
    strategy: this.highlightWorngWords, //here
    component: HighlightedWords
  }
]);
2 在 Draft.js 装饰器中选择文本 onClick 装饰器实现拖放

我正在尝试实现一个功能,让我可以在 Draft.js 编辑器中拖动装饰文本,并在这个问题上花费了几天的脑力。 蓝色高光是歌词中的和弦,我的目标是调整它们在文本中的位置。 我的策略 单击装饰器时,在装饰器onClick标记文本 移动标记的文本 我知道我在 Draft.js 中创建了一个 ...

3 如何在Draft.js中使用修饰符装饰文本

我正在尝试修饰一些文本,但是与其使该过程由正则表达式策略管理,不如说是一个ajax调用的结果,以指定要修饰的文本的和平度。 可以使用Modifier库中的任何方法吗? 我的想法是在onChange方法中调用某些内容并修改editorstate。 任何想法将不胜感激。 ...

5 如何在 Draft.js 中的绝对文本位置装饰文本

我试图突出显示出现在全文中特定已知位置的字符串。 有一个 API 可以返回字符串的确切、绝对开始和结束位置。 到目前为止,我已经设法使用CompositeDecorator来突出显示带有正则表达式策略的字符串,但我需要改用这些坐标,因为正则表达式不够准确(而且我已经知道文本中的位置)。 然而,虽 ...

9 Draft.js 编辑器为空

如何测试draftjs编辑器的内容是否为空? 我现在唯一的想法是与此函数返回的对象进行对象比较: EditorState.createEmpty().getCurrentContent() ...

10 如何在 Draft.js 中插入 HTML?

我正在使用 react-draft-wysiwyg 编辑器,它建立在 Draft.js 之上。 我想弄清楚,如何以编程方式插入 HTML,例如: 到目前为止,我得到的最接近的是使用 Modifier 模块的 insertText() 方法。 例子: 这会导致插入一个文字字符串,而不是 HTM ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM