シンプルなデバウンスは16を反応させるが、これはで動作しない14.3

Question

は16反応する反応でjsfiddleで動作動作していないが、このjsfiddleは正常に動作します：https://jsfiddle.net/kp04015o/9/

できる任意の1つのデバッグこのエラーなぜ？ handleChange = debounce（e => this.setState（{searchTerm：e.target.value}））でnullのプロパティ 'value'を読み取ることができません。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const debounce = (cb, wait) => { 
    let timeout; 

    return function() { 
    let callback =() => cb.apply(this, arguments); 

    clearTimeout(timeout); 
    timeout = setTimeout(callback, wait); 
    } 
} 

class Debounce extends React.Component { 
    state = { 
    searchTerm: '', 
    }; 

    handleChange = debounce(e => this.setState({searchTerm: e.target.value}), 1000); 

render() { 
    return (
    <div> 
     <input type="text" onChange={this.handleChange}/> 
     <div>Search Value 2: {this.state.searchTerm}</div> 
    </div> 
    ); 
    } 
} 

ReactDOM.render(<Debounce />, document.getElementById('root')); 

Answer 1

読む程度Event Pooling

ここでは、作業コードがあります。ES7のデコレータとdeckoモジュールと

class Debounce extends React.Component { 
    constructor(props) { 
    super(props); 

    this.handleChange = this.handleChange.bind(this); 
    } 

    state = { 
    searchTerm: '', 
    }; 

    setSearchTerm = debounce((searchTerm) => this.setState({ searchTerm }), 1000); 

    handleChange(e) { 
    this.setSearchTerm(e.target.value); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={this.handleChange} /> 
     <div>Search Value 2: {this.state.searchTerm}</div> 
     </div> 
    ); 
    } 
} 

またはよりよい： 'decko' から インポート{デバウンス、バインドを};

class Debounce extends React.Component { 
    state = { 
    searchTerm: '', 
    }; 

    @debounce(1000) 
    setSearchTerm(searchTerm) { 
    this.setState({ searchTerm }); 
    } 

    @bind 
    handleChange(e) { 
    this.setSearchTerm(e.target.value); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={this.handleChange} /> 
     <div>Search Value 2: {this.state.searchTerm}</div> 
     </div> 
    ); 
    } 
} 

Answer 2

私はこれを知っているように感じます。

これを変更してみてください：

<input type="text" onChange={this.handleChange} /> 

のいずれかに：

<input type="text" onChange={this.handleChange.bind(this)} /> 

か：私の腸の反応は私が反応イベントに未定義のものを見るたびにある

<input type="text" onChange={(e) => this.handleChange(e)} /> 

、あなたのデフォルト状態が処理されるためです。これが機能する場合は、実行コンテキストまたはレキシカル環境が表示される可能性のある次元とは異なるためです。