gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:12:15 24 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

您收到此错误是因为您尝试在 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>

关于javascript - 使用 react/redux 去抖文本区域输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43709356/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com