Javascript 反应-如何禁用下一步，直到正确的用户操作？

我使用这个库是为了在React（duh）中构建一个用户巡更，这对于简单的步骤来说非常简单，但是我不知道如何阻止用户继续巡更，直到他们完成与当前步骤相关的操作

例如，在步骤1中，我希望他们在继续之前执行搜索（输入文本并提交）。现在我正在使用

goTo（）

函数自动前进到下一步，但是如何防止他们只使用导航箭头而不完全禁用导航（以防他们需要返回）

导出常量步骤：ReactourStep[]=[
//这将在搜索后自动前进到下一步…但用户也可以使用巡更导航代替。。。
{
选择器：'.search输入'，
内容：（{goTo}:{goTo:（步骤：编号）=>void}）=>{
const searchBar=document.getElementById（'search-bar'），作为HTMLInputElement；
const searchButton=document.querySelector（“.search button”）作为HTMLButtoneElement；
//超时以允许渲染结果
searchButton.addEventListener（'click'，（）=>setTimeout（（）=>{
if（searchBar.value！=''&&document.querySelector（'.no results'）==null）{
后藤（1）；
}
}, 1000));
返回(
可以使用关键字和布尔表达式进行搜索。
);
}
},
{
//第二步，这里
}
]

我也尝试过使用带有自定义按钮的条件

禁用的
布尔值，但与React不同，它不会立即重新渲染——只有在用户重新访问该步骤时才重新渲染——这违背了整个目的

如果有帮助的话，库GitHub也有类似于我的问题，但没有响应（和）

export const steps: ReactourStep[] = [
  // This will automatically advance to the next step after a search... but the user could also just use the tour navigation instead...
  {
    selector: '.search-input',
    content: ({ goTo }: { goTo: (step: number) => void }) => {
      const searchBar = document.getElementById('search-bar') as HTMLInputElement;
      const searchButton = document.querySelector('.search-button') as HTMLButtonElement;

      // Timeout in order to allow for results to render
      searchButton.addEventListener('click', () => setTimeout(() => {
        if (searchBar.value !== '' && document.querySelector('.no-results') === null) {
          goTo(1);
        }
      }, 1000));

      return (
        <div>
          You can search using keywords and boolean expressions.
        </div>
      );
    }
  },
  {
     // Step 2 here
  }
]