Question

我正在研究一个应该能够做到的组件

按输入搜索-触发onBlur事件后，将使用输入字段调用一个函数。 onBlur 事件发生后， startSearch （）方法将运行。
按选定流派过滤-用户可以从其他组件中从具有流派的列表中选择流派。在 onClick 事件之后，将运行 startFilter （）方法。

好消息： 我已经完成了上面的两个功能。

坏消息： 上述2个功能无法正常使用。请参见下面的代码。在工作下面有2个调用，但是仅当我注释掉2个之一时。我试图以各种方式调整 startSearch （）方法，但我一直走到一堵胖墙。

stacked_df=two_prop_test.stack()
stacked_df

问题 如何使过滤器/搜索方法起作用？。不幸的是，简单地将它们放在if / else中不是解决方案（请参阅代码中的注释）。

Person--------------                     Icecream   

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults--------------                  Did Not Purchase  

Adults----------                  Did Not Purchase  

Adults----------                  Did Not Purchase  

Adults-----------                 Purchased 

Adults------------                Purchased 

Adults----------                  Purchased 

Adults-----------                 Did Not Purchase  

Adults-----------                 Did Not Purchase  

Adults-----------                 Did Not Purchase  

Children---------         Did Not Purchase  

Children---------         Purchased 

Children---------         Did Not Purchase  

Children---------         Purchased 

Children---------         Did Not Purchase  

Children---------         Did Not Purchase  

Children----------        Did Not Purchase  

Children---------         Purchased 

Children--------          Did Not Purchase  

Children---------        Did Not Purchase   

Children --------        Did Not Purchase   

Children--------         Did Not Purchase   

Children---------        Did Not Purchase   

Children--------         Did Not Purchase   

Children---------        Did Not Purchase   

Children---------        Did Not Purchase   

Children--------         Did Not Purchase   

Children--------         Did Not Purchase

Answer 1

SetState是一个采用回调函数的异步操作。我怀疑您的第二个函数在第一个SetState完成之前运行。

此外，您正在自己修改DOM。您需要让React仅仅通过修改状态来做到这一点。我现在没有时间写一个示例，但是希望在此同时有所帮助。

Answer 2

您可以修改搜索功能吗，

//search
startSearch(input) {
    const { value } = input.target
    const { searchInput } = this.state

    if (!this.state.searchByGenre) {
        this.setState(prevState => ({
            searchInput: prevState.searchInput = value,
            showDeleteButton: prevState.showDeleteButton = true,
  }))

    JSON.stringify(value) !== '' ? this.filter(value) : this.startFilter(searchInput)
    }
}

反应搜索和过滤方法问题

2 个答案: