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

}