条件の後にmufaを使用して反応成分間の通信を停止する

Question

mufaでsub/pubパターンを使用して、小道具の代わりに反応コンポーネント間を通信しています。次に、Parentコンポーネントのロジックを緩和します（次のスニペットをご覧ください）。

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イベントへ）。 mufaはこのように退会する方法を持っているよう

Answer 1

に見えます：

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>