具有React的DraftJs,装饰器无法正常工作

问题描述

我尝试创建自己的装饰器,但无法正常工作。 它对我在搜索字段中输入的单词做了一些样式设计
输入字段
 <Editor
              editorState={this.props.editorState}
              onChange={this.handleOnChange}
      
          />
          <div>
            <input
                value={this.props.searchState}
                onChange={this.props.onChangeSearch}
                placeholder="Search..."
            />

我的装饰器

const generateDecorator = (highlightTerm) => {
  const regex = new RegExp(highlightTerm,'g');
  return new CompositeDecorator([{
    strategy: (contentBlock,callback,contentState) => {
      if (highlightTerm !== '') {
        findWithRegex(regex,contentBlock,callback);
      }
    },component: SearchHighlight,}]);
};

我的“样式”组件

class SearchHighlight extends Component {
  render() {
    return (
        <span style={{fontSize: '32',backgroundColor: 'green',width: 40,height: 40}}>
        {this.props.children}
      </span>
    );
  }

实现装饰器

  onChangeSearch = (e) => {
    const search = e.target.value;
    this.setState({
      search,editorState: EditorState.set(this.state.editorState,{decorator: generateDecorator(search)}),});
  };

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)