使用 react/redux 去抖动 textarea 输入

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

您收到此错误是因为您尝试在的超时时间.persist()内处理该事件。debounce当超时调用回调时，合成事件已经被释放。因此，您必须在去抖之外保留该事件。

然而，你的想法还有另一个问题。由于文本框是受控组件，因此对更新值进行去抖动操作将导致文本框仅在用户停止键入后才呈现（部分）文本。

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

例如：

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>