如何使用rxjs在reactjs中消除用户输入的影响

我的问题可能很小，但到目前为止我还没有找到答案

当用户键入时，我如何在React中延迟（去盎司）更新状态，以避免不必要的更新

有了

，我如何将onChange事件绑定到rxjs？我应该尝试让这个输入可见还是应该使用FromEventPattern

在这两种情况下，我都不知道如何将React事件与rxjs绑定。 第二个问题是，用户在解盎司过程中是否会看到任何输入更改？

Solution#1 使用主题：

---

根据omerts的主张（特别是解决方案#1），这里是我的最终代码

input: Rx.Subject<any>;

constuctor(...){
   this.input = new Rx.Subject();
   this.input.debounce(1000).subscribe(this.processInput);
}

handleChange = event => {
   event.persist();
   this.input.onNext(event);

    };

processInput = x => {
   // invoke redux/flux action to update the state
}

render(){
   ...
   <input onChange={this.handleChange} ... />
   ...
}

输入：接收主体；
构造函数（…）{
this.input=new Rx.Subject（）；
this.input.debounce（1000）.subscribe（this.processInput）；
}
handleChange=事件=>{
event.persist（）；
this.input.onNext（事件）；
};
processInput=x=>{
//调用redux/flux操作以更新状态
}
render（）{
...
...
}

试着这样做：

class MyScene extends React.Component {

    constructor(props) {
        var onChangeTextObservable = Rx.Observable.fromEventPattern(
           (handler) => {this.onChangeText = handler}
        );
        onChangeTextObservable.subscribe(x => console.log(x));
    }

    render() {
       return (
          <TextInput onChangeText={this.onChangeText}>
       )
    }

}

类MyScene扩展了React.Component{
建造师（道具）{
var onChangeTextObservable=Rx.obbservable.fromEventPattern(
（handler）=>{this.onChangeText=handler}
);
onChangeTextObservable.subscribe（x=>console.log（x））；
}
render（）{
返回(
)
}
}

我一直在问这个问题，而我更喜欢这个问题

为简单起见，请复制以下内容。请把原件投上去

---

您将需要从更改事件（例如 （使用主题）然后在这个问题上消除疑虑

下面是一个功能齐全的示例：

类搜索扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”，
脱口而出：“，
};
this.onSearch$=new Rx.Subject（）；
this.onSearch=this.onSearch.bind（this）；
}
componentDidMount（）{
this.subscription=this.onSearch$
.debounceTime（300）
.subscribe（debounced=>this.setState（{debounced}））；
}
组件将卸载（）{
如果（此订阅）{
this.subscription.unsubscripte（）；
}
}
研究（e）{
const search=e.target.value；
this.setState（{search}）；
this.onSearch$.next（搜索）；
}
render（）{
const{search，debounced}=this.state；
返回(
取消公告值：{取消公告}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

谢谢，使用主题似乎最适合我，但是我不需要扫描，只需要订阅并根据需要处理输入（而不是“折叠”语义）。很高兴听到这个消息。如果你认为我的答案是好的，请接受它。我似乎无法获得解决方案2来与新的RXJS一起工作，也没有更新答案的机会。这是非常有用的，尽管已经过时了。
const handler = (e) => {        
  Rx.Observable
    .fromEventArgs(e, 'UniqueKey') 
    .debounceTime(1000)        
    .subscribe(x => console.log('Send an action', x))
}

input: Rx.Subject<any>;

constuctor(...){
   this.input = new Rx.Subject();
   this.input.debounce(1000).subscribe(this.processInput);
}

handleChange = event => {
   event.persist();
   this.input.onNext(event);

    };

processInput = x => {
   // invoke redux/flux action to update the state
}

render(){
   ...
   <input onChange={this.handleChange} ... />
   ...
}

class MyScene extends React.Component {

    constructor(props) {
        var onChangeTextObservable = Rx.Observable.fromEventPattern(
           (handler) => {this.onChangeText = handler}
        );
        onChangeTextObservable.subscribe(x => console.log(x));
    }

    render() {
       return (
          <TextInput onChangeText={this.onChangeText}>
       )
    }

}