Question

这在反应16中没有用，但这个jsfiddle工作正常：https://jsfiddle.net/kp04015o/9/

任何人都可以调试此错误原因吗？无法阅读财产＆＃39;价值＆＃39; of null，at handleChange = debounce（e =＆gt; this.setState（{searchTerm：e.target.value}），1000）;

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

我觉得我知道这一点。

尝试更改此内容：

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

要么：

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

或：

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

每当我看到React事件未定义的东西，并且因为你的默认状态被处理时，这是我的直觉反应。如果这样做，那是因为执行上下文或词汇环境与可能出现的维度不同。

Answer 2

了解Event Pooling

这里有一个有效的代码：

decko

使用ES7装饰器和

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>
    );
  }
}

模块

或更好：从＆＃39; decko＆＃39;;

导入{debounce，bind}

ggplot

简单的辩论不在反应16中工作但在jsfiddle中起作用反应14.3

2 个答案: