Как мне отменить обработчик события в реакции с lodash? - PullRequest
Новая
       11

Как мне отменить обработчик события в реакции с lodash?

1 голос
/ 10 октября 2019 
import { debounce } from 'lodash';

// constructor
this.inputChangeHandler2 = debounce(this.inputChangeHandler, 100);

// html
<textarea onChange={this.inputChangeHandler2} />

Ничего не происходит, когда я пытаюсь использовать функцию отладки lodash. Я помещаю точку останова в inputChangeHandler и, если никогда не нажимаю.

Ответы [ 3 ]

2 голосов
/ 10 октября 2019

Не знаю, какие у вас проблемы.

Но ниже я выбрал фрагмент, работающий с отладкой lodash. Может быть, сравните это с вашим и посмотрите, что отличается. 

class Test extends React.Component {
  constructor () {
    super();
    this.state = {lasttime: "?"}
  }
  changed () {
    this.setState({lasttime: new Date().getTime()});
  }
  render () {
    return (
      <React.Fragment>
        <textarea onChange={_.debounce(this.changed.bind(this), 100)}/>
        <div>{this.state.lasttime}</div>
      </React.Fragment>
    );
  }
}


ReactDOM.render(<React.Fragment>
  <Test/>
</React.Fragment>, document.querySelector('#mount'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>



<div id="mount"></div>
0 голосов
/ 11 октября 2019

Вы можете попробовать e.persist () (если вы хотите получить доступ к свойствам события асинхронным способом) 

class Abc extends React.Component {

 inputChangeHandler2 = (e)=> {
  //e(event will be available here)
  //your code
 }

hChange = e => {
 e.persist();
 _.debounce(() => this.inputChangeHandler2(e), 300);
}

render () {
 return (
  <div>
    <input onChange={this.hChange.bind(this)} />
  </div>
  );
 }
}
0 голосов
/ 11 октября 2019

Поскольку React использует синтетические события , вы не можете извлечь значение внутри дебазованной функции (событие больше не существует). Вам понадобится стандартный обработчик событий (onChange в коде), чтобы получить значение, и функция debounce (setValue), чтобы установить его: 

class Demo extends React.Component {
  state = { text: '' };
  
  setValue = _.debounce(text => this.setState({ text }), 300);
  
  onChange = e => this.setValue(e.target.value);
  
  render () {
    const { text } = this.state;
  
    return (
      <div>
        <input onChange={this.onChange} defaultValue={text} />
        <div>{text}</div>
      </div>
    );
  }
}


ReactDOM.render(
  <Demo />,
  root
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
...