React JS：onPaste 未按预期工作

Question

我有一个用于 textarea 的简单 React 组件，它会随着用户键入内容而增加其大小。该函数如下所示：

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

当我使用 onKeyUp 在 textarea 上调用这个函数时它工作正常，但是如果我将它更改为 onPaste 然后函数被调用（如果你 console.log 东西） , 但没有按预期将高度添加到文本区域。

我在这里遗漏了什么明显的东西吗？

完整代码如下：

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 onPaste={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>
        )
    }

}

Answer 1

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

将事件更改为 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>
        )
    }

}

React JS：onPaste 未按预期工作

React JS: onPaste not working as expected

javascript

onkeyup

dom-events

onpaste

reactjs