响应文本输入组件上的 Rxjs 去抖动 [英] Rxjs debounce on react text input component

问题描述

我有以下反应组件

<input className={styles.incSrchTextBox} type="text" name="search" placeholder="Search.."onChange={this.onChange}/>onChange(e) {const newText = e.target.value;控制台日志(新文本)；this.setState({ searchText: newText });}

如何在 rxjs 上使用 debounce?

解决方案

您需要从更改事件中创建可观察对象(例如使用主题)，然后对其进行去抖动.

以下是功能齐全的示例:

class Search extends React.Component {构造函数(道具){超级(道具)；this.state = {搜索: ''，去抖动:'',};this.onSearch$ = new Rx.Subject();this.onSearch = this.onSearch.bind(this);}componentDidMount(){this.subscription = this.onSearch$.去抖动时间(300).subscribe(debounced => this.setState({ debounced }));}componentWillUnmount() {如果(this.subscription){this.subscription.unsubscribe();}}onSearch(e) {const search = e.target.value;this.setState({搜索});this.onSearch$.next(search);}使成为() {const { 搜索，去抖动 } = this.state;返回 (<div><input type="text" value={search} onChange={this.onSearch}/><div>去抖动值:{去抖动}</div>

);}}ReactDOM.render(<搜索/>,document.getElementById('root'));

<script src="https://unpkg.com/rxjs@5.4.0/bundles/Rx.min.js"></脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

I have the following react component

<input className={styles.incSrchTextBox} type="text" name="search" placeholder="Search.."
   onChange={this.onChange} />


onChange(e) {
    const newText = e.target.value;
    console.log(newText);
    this.setState({ searchText: newText });
}

How do I use debounce on rxjs on this?

解决方案

You will need to cretae observable from change events(for example using Subject) and then debounce on that.

Here is the fully featured example for you:

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search: '',
      debounced: '',
    };
    this.onSearch$ = new Rx.Subject();
    this.onSearch = this.onSearch.bind(this);
  }
  componentDidMount(){
    this.subscription = this.onSearch$
      .debounceTime(300)
      .subscribe(debounced => this.setState({ debounced }));
  }
  
  componentWillUnmount() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
  
  onSearch(e) {
    const search = e.target.value;
    this.setState({ search });
    this.onSearch$.next(search);
  }

  render() {
    const { search, debounced } = this.state;
    return (
      <div>
        <input type="text" value={search} onChange={this.onSearch} />
        <div>debounced value: {debounced}</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Search />,
  document.getElementById('root')
);

<script src="https://unpkg.com/rxjs@5.4.0/bundles/Rx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这篇关于响应文本输入组件上的 Rxjs 去抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！