react/reduxでテキスト入力をデバウンス

Question

私はreact/reduxでテキストエリアの値をデバウンスして、デバッグされた値をdiv#previewに表示しようとしていますが、最初の関数呼び出し後に合成イベントの警告が表示されます。

私は、意図したとおりに動作しているtextareaの値の状態を処理するための減速機を持っていますが、このスニペットではローカル状態を書きました。

debounce以外にも、それぞれの回答が返ってくるのを避けるためのより良い方法がある場合は、keypress私は知りたいです。前もって感謝します。

class TextArea extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = {foo: ''} 
 
    } 
 
    
 
    handleInputChange = _.debounce((e) => { 
 
    e.persist(); 
 
    let value = e.target.value; 
 
    this.setState({foo: value}); 
 
    }, 300); 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <textarea onChange={(e)=>this.handleInputChange(e)} value={this.state.foo}></textarea> 
 
     <p id="preview">{this.state.foo}</p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(
 
    <TextArea />, 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.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>

Answer 1

あなたはdebounceのタイムアウト内.persist()にイベントを試みるため、このエラーが発生します。タイムアウトがコールバックを呼び出すと、合成イベントはすでに解放されました。だから、あなたはデバウンスの外でイベントを持続させなければならないでしょう。

しかし、あなたのアイデアには別の問題があります。テキストボックスは制御されたコンポーネントであるため、更新された値をデバウンスすると、テキストボックスは、使用されていない入力の後にのみテキストの一部をレンダリングします。

制御された要素の状態を直ちに更新し、表示状態（またはreduxアクションのディスパッチ）の更新をデバウンスする必要がないようにするには。例えば

：

class TextArea extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { foo: '', controlled: '' } 
 
    } 
 
    
 
    updateFoo = _.debounce((value) => { // this can also dispatch a redux action 
 
    this.setState({foo: value}); 
 
    }, 300); 
 
    
 
    handleInputChange = (e) => { 
 
    const value = e.target.value; 
 
    
 
    this.setState({ 
 
     controlled: value 
 
    }); 
 
    
 
    this.updateFoo(value); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <textarea onChange={ this.handleInputChange } 
 
     value={this.state.controlled} /> 
 
     <p id="preview">{this.state.foo}</p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(
 
    <TextArea />, 
 
    document.getElementById("react") 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.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="react"></div>

Answer 2

他の答えは、すでにイベントを永続化の問題をカバーしました。入力のデバウンスの面については、私のブログ投稿Practical Redux, Part 7: Form Change Handlingを読んでみてください。その記事では、残りのアプリケーションのデバウンステキスト入力の更新を処理できる再利用可能なコンポーネントを示し、同時に現在の値で再レンダリングできるようにしています。