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

Question

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

我想知道每次用户在搜索框上点击回车时，在编辑器的搜索结果上有一些 focus() 会怎样，在结果之间循环，类似于原生 google chrome的查找功能。

Answer 1

我可以建议以下解决问题的方法。工作演示 - https://jsfiddle.net/levsha/o3xyvkw7/ 首先，我们在组件状态中定义 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 方法中，我们为活动突出显示元素应用适当的样式并检查我们是否应该滚动 window 因为该元素将在视口中。

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 编辑器的搜索结果中聚焦

How to focus among the search results on draft-js editor

javascript

reactjs

draftjs