Question

我正在尝试开发一个搜索框，在用户键入内容时会在弹出窗口中过滤搜索结果。我的代码示例如下。

class Search extends React.Component {
  constructor(props) { ... }

  onInputClick() {
    this.setState({...this.state, openResult: true});
  }

  onInputBlur() {
    this.setState({...this.state, openResult: false});
  }

  render() {
    return {
       <div id='search'>
         <Input onClick = {this.onInputClick} onBlur = {this.onInputBlur} />
         <Results open={this.state.open} />
       </div>
    }
  }
}

在<Input /> react组件中，我将<input />使用onClick和onBlur。因此，当用户单击进/出时，整个<Search />组件将重新呈现，并且基于this.state.open的值，GUI会显示/隐藏结果。

现在，我的问题是我在let input$ = Rx.fromEvent(ref, 'input')组件中声明了<Input />。如何在<Result />中过滤结果？

我的解决方案之一就是像input$.subscribe(data => updateReduxState(data));这样使用Redux。状态更改后，<Result />组件将重新呈现。

首先，对吗？其次，这是过度杀伤/过度设计吗？以这种方式使用Redux + Rxjs太复杂了。

Answer 1

您的解决方案似乎还可以。我将使用 RxJS Subject 提供纯RxJS替代方案。假设您有两个部分，具有<input>的搜索部分和基于搜索关键字显示数据的结果部分。

__________        __________
| search |        | result |
|        |   -->  |        |
|________|        |________|

您可以做的是，创建一个subject并根据需要通过模糊输出或键入它来发出值。让结果组件订阅该主题并监听值。根据搜索框中的关键字，运行评估结果的功能并将其显示在结果组件中。这样您就可以消除redux。

伪代码可以是类似的

searchComponent

searchboxSubject = new Subject<any>();

blurOut(event) {
   this.searchboxSubject.next(event); //event holds your search keyword.
}

resultComponent

searchboxSubject.subscribe((data) => this.evaluateResultAndUpdateUI(data));

Answer 2

最后，我没有使用这种方法input$.subscribe(data => updateReduxState(data))。相反，我只是将setState（）用于父组件。只是回顾一下，input$是在组件内声明的，因此我需要像这样<Input onChange={Search.onChange()} />传递onChange处理程序

React如何订阅在另一个组件中声明的可观察对象

2 个答案: