javascript - 在条件后使用 mufa 停止 react 组件之间的通信

Question

我通过 mufa 使用 sub/pub 模式在 React 组件而不是 props 之间进行通信。然后，我们将减轻父组件中的逻辑(您会在以下代码片段中注意到这一点)。

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 个字符时如何停止 Label 和 Input 之间的通信。

我试过这个:

   onInputChange(inputValue) {


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

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

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

Answer 1

看起来 mufa 有一种取消订阅的方法:

const mufa = new Mufa();
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://abdennour.github.io/mufa/mufa-latest.min.js"></script>


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