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的东西），但没有高度添加到textarea预期。

有什么明显的我在这里失踪？

下面是完整的代码：

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> 
     ) 
    } 

}