Question

我已经实现了像本教程一样的查找和替换功能，并且工作正常：https://reactrocket.com/post/draft-js-search-and-replace/

我想知道每次用户点击进入搜索框时在编辑器的搜索结果上有一些焦点（），在结果中循环，类似于本机谷歌浏览器＆＃39; s找到功能。

Answer 1

我可以建议以下解决方案。工作演示 - Bootstrap Code首先，我们在组件状态中定义activeHighlightIndex属性。我们将在这里存储活跃突出显示的索引。

constructor(props) {
  super(props);

  this.state = {
    search: '',
    replace: '',
    activeHighlightIndex: 0,
    editorState: EditorState.createWithContent(ContentState.createFromText(string)),
  }
}

在搜索输入上绑定onKeyDown处理程序。如果是enter按钮，我们会增加activeHighlightIndex。

onKeyDown = (e) => {
  if (e.keyCode === 13) { // enter
    this.setState({
      activeHighlightIndex: this.state.activeHighlightIndex + 1
    });
  }
}

在componentDidUpdate方法中，我们为活动突出显示元素应用适当的样式，并检查是否应滚动窗口，因为该元素将位于视口中。

componentDidUpdate() {
  if (this.state.search.length) {
    const allHighlights = this.editor.refs.editor
      .getElementsByClassName('search-and-replace-highlight');
    const index = this.state.activeHighlightIndex % allHighlights.length;
    const newActiveHighlight = allHighlights[index];
    const currentActiveHighlight = this.editor.refs.editor
      .querySelector('.search-and-replace-highlight.active-highlight');

    if (newActiveHighlight && currentActiveHighlight !== newActiveHighlight) {
      currentActiveHighlight && currentActiveHighlight.classList
        .remove('active-highlight');

      newActiveHighlight.classList.add('active-highlight');
      scrollToElementIfNeeded(newActiveHighlight);
    }
  }
}

如何在draft-js编辑器中搜索搜索结果

1 个答案: