使用react / redux去除textarea输入 [英] debounce textarea input with react/redux

问题描述

我正在尝试使用react / redux去除textarea值并在 div＃preview 中显示去抖动的值但是我在第一次函数调用后得到了合成事件警告。

I'm trying to debounce textarea value with react/redux and show the debounced value in div#preview but i'm getting synthetic event warning after first function call.

我有处理textarea值状态的reducer，它正在按预期工作，但为了简单起见，我在这个片段中编写了本地状态。

I have reducer for handling textarea value state which is working as intended, but for simplicity i've wrote local state in this snippet.

除了 debounce 之外还有更好的方法，以避免在每个 keypress <之后反应重新出现我很想知道。在此先感谢。

If there is a better method besides debounce to avoid react rerendering after each keypress I would love to know. Thanks in advance.

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>

推荐答案

您收到此错误的原因是您尝试 .persist（） debounce 超时内的事件。超时调用回调时，合成事件已经释放。所以你必须在辩护之外坚持这个事件。

You get this error because you try to .persist() the event inside the debounce's timeout. When the timeout invokes the callback, the synthetic event was already released. So you'll have to persist the event outside of the debounce.

然而，你的想法有另一个问题。由于文本框是一个受控组件，因此消除更新后的值会导致文本框仅在使用停止输入后呈现（部分）文本。

However, your idea has another problem. Since the textbox is a controlled component, debouncing the updated value, would cause the textbox to render (part of) the text only after the used stopped typing.

为了防止这种情况您需要立即更新受控元素的状态，并对显示状态（或redux操作调度）的更新进行去抖动。

To prevent that you need to update the state for the controlled element immediately, and debounce the update for the display state (or the redux action dispatch).

例如：

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>

这篇关于使用react / redux去除textarea输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！