在条件之后使用mufa停止反应组件之间的通信 [英] Stop the communication between react components using mufa after a condition

问题描述

我通过 mufa 使用子/ pub模式在React组件之间进行通信而不是道具。然后，我们将缓解Parent组件中的逻辑（正如您将在下面的代码片段中看到的那样）。

I am using the sub/pub pattern via mufa to make communication between React components instead of props. Then, we will mitigate the logic in the Parent component (as you will notice that in the following snippet).

const {on, fire} = mufa;
class Input extends React.Component {
   
   onChange(event) {
     fire('input_change', event.target.value);
   }

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

class Label extends React.Component {
   state= {text: ""};
   componentDidMount() {
     on('input_change', this.onInputChange.bind(this));
   }

   onInputChange(inputValue) {
      this.setState({text: inputValue});
      // I need code to stop calling this method when inputValue reaches 10 characters. 
       
    }

   render() {
     return <label > {this.state.text} </label>
   }
}

class App extends React.Component {
   // No logic here thanks to the Sub/Pub pattern. 
   render() {
     return (
        <div>
           <Label />
           <Input/>
    
        </div>
     )
   }
}


ReactDOM.render(<App />, document.getElementById('app'));

<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>
<script src="https://cdn.rawgit.com/abdennour/mufa/ddf78fd9/cdn/mufa-latest.min.js"></script>


<div id="app" ></div>

我关注的是如何在标签和输入之间停止此通信输入值达到10个字符。

My concern is how to stop this communication between Label and Input when the input value reaches 10 chars.

我试过这个：

   onInputChange(inputValue) {


      if (inputValue.length <= 10 )  // <-- I add this.

         this.setState({text: inputValue});
    }

但是，这种情况不会阻止调用 onInputChange 。我的目标是当输入立即达到10个字符时停止此订阅（到 input_change 事件）。

However , this condition does not prevent the calling of onInputChange. My target is to stop this subscription( to input_change event) when the input reaches 10 chars immediately.

推荐答案

看起来像 mufa 有办法取消订阅如下：

It looks like mufa has a way to unsubscribe like this:

const {on, fire, unsub} = mufa;
class Input extends React.Component {
   
   onChange(event) {
     fire('input_change', event.target.value);
   }

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

class Label extends React.Component {
   state= {text: ""};
   constructor(props) {
        super(props);
        this.sub = null;
   }
   componentDidMount() {
     this.sub = on('input_change', this.onInputChange.bind(this));
 
   }

   onInputChange(inputValue) {

      if(inputValue.length >= 10) {
       unsub(this.sub);
       return;
      };

      this.setState({text: inputValue});
      // I need code to stop calling this method when inputValue reaches 10 characters. 
       
    }

   render() {
     return <label > {this.state.text} </label>
   }
}

class App extends React.Component {
   // No logic here thanks to the Sub/Pub pattern. 
   render() {
     return (
        <div>
           <Label />
           <Input/>
    
        </div>
     )
   }
}


ReactDOM.render(<App />, document.getElementById('app'));

<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>
<script src="https://cdn.rawgit.com/abdennour/mufa/ddf78fd9/cdn/mufa-latest.min.js"></script>


<div id="app" ></div>

这篇关于在条件之后使用mufa停止反应组件之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！