javascript - 使用 react/redux 去抖文本区域输入

Question

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

我有用于处理按预期工作的 textarea 值状态的 reducer，但为简单起见，我在此代码段中编写了本地状态。

如果除了 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 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>