Javascript React JS:onPaste未按预期工作

我为

textarea

提供了一个简单的React组件，当用户输入时，该组件会增加其大小。函数如下所示：

changeHeight(e) {
    const height = this.textarea.clientHeight;
    const scrollHeight = this.textarea.scrollHeight;
    if (height < scrollHeight) {
        this.textarea.style.height = scrollHeight + "px";
    }
}

感谢您在评论中发布答案：

将事件更改为

onInput

可按预期工作（当用户键入并粘贴时会触发事件）。更新代码：

class Textarea extends React.Component {

    constructor(props) {
    super(props);
    this.changeHeight = this.changeHeight.bind(this);
  }

    changeHeight(e) {
        const height = this.textarea.clientHeight;
        const scrollHeight = this.textarea.scrollHeight;
        if (height < scrollHeight) {
            this.textarea.style.height = scrollHeight + "px";
        }
        console.log("changeHeight");
    }

    render() {
        const {input, label, type, optional, value, helperText, meta: { touched, error }, ...custom } = this.props;
        return (
            <div className="measure mb4">
                <label for="name" className="f6 b db mb2">{label} {optional ? <span className="normal black-60">(optional)</span> : null}</label>
                <textarea onInput={this.changeHeight} ref={(el) => { this.textarea = el; }} className={"input-reset ba b--black-20 pa2 mb2 db w-100 border-box lh-copy h5 animate-h"} aria-describedby="name-desc" {...input} {...custom} value={value} />
                {touched && error ? <small id="name-desc" className="f6 red db mb2">{error}</small> : null}
                {helperText ? <small id="name-desc" className="f6 black db mb2">{helperText}</small> : null}
            </div>
        )
    }

}

class Textarea扩展React.Component{
建造师（道具）{
超级（道具）；
this.changeHeight=this.changeHeight.bind（this）；
}
更改高度（e）{
常量高度=this.textarea.clientHeight；
const scrollHeight=this.textarea.scrollHeight；
如果（高度<滚动高度）{
this.textarea.style.height=滚动高度+px；
}
控制台日志（“更改高度”）；
}
render（）{
const{input，label，type，optional，value，helperText，meta:{toucted，error}，…custom}=this.props；
返回(
{label}{可选？（可选）：null}
{this.textarea=el；}}className={“输入重置ba b--black-20 pa2 mb2 db w-100边框框lh copy h5 animate-h”}aria descibedby=“name desc”{…输入}{…自定义}值={值}/>
{触碰&&error？{error}:null}
{helperText？{helperText}:null}
)
}
}

可能是时间，即

onpaste

在文本区域的值更改之前触发。感谢@Teemu，我将研究一下这个技巧：使用

oninput

而不是多个事件，除了写入之外，它还包括粘贴、剪切、，在文本区域拖放文本。感谢@Teemu，它实际上解决了我的问题：现在一切正常

class Textarea extends React.Component {

    constructor(props) {
    super(props);
    this.changeHeight = this.changeHeight.bind(this);
  }

    changeHeight(e) {
        const height = this.textarea.clientHeight;
        const scrollHeight = this.textarea.scrollHeight;
        if (height < scrollHeight) {
            this.textarea.style.height = scrollHeight + "px";
        }
        console.log("changeHeight");
    }

    render() {
        const {input, label, type, optional, value, helperText, meta: { touched, error }, ...custom } = this.props;
        return (
            <div className="measure mb4">
                <label for="name" className="f6 b db mb2">{label} {optional ? <span className="normal black-60">(optional)</span> : null}</label>
                <textarea onInput={this.changeHeight} ref={(el) => { this.textarea = el; }} className={"input-reset ba b--black-20 pa2 mb2 db w-100 border-box lh-copy h5 animate-h"} aria-describedby="name-desc" {...input} {...custom} value={value} />
                {touched && error ? <small id="name-desc" className="f6 red db mb2">{error}</small> : null}
                {helperText ? <small id="name-desc" className="f6 black db mb2">{helperText}</small> : null}
            </div>
        )
    }

}