実際の合成タッチイベント

Question

次の.jsでは、ブラウザのテキスト領域のサイズを変更しても、他のイベントは期待通りに動作しますが、タッチイベントタイプは表示されません。

class App extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = {currentEvent: "---"}; 
     this.update = this.update.bind(this) 
    } 

    update(e){ 
     this.setState({currentEvent: e.type}) 
    } 


    render(){ 
     return (
      <div> 
       <textarea cols='30' rows='10' 
        onKeyPress={this.update} 
        onCopy={this.update} 
        onDoubleClick={this.update} 
        onTouchStart={this.update} 
        onTouchMove={this.update} 
        onTouchEnd={this.update} 
        /> 
       <h1>{this.state.currentEvent}</h1> 
      </div> 
     ) 
    } 
} 

export default App 

Answer 1

基本的には何のブラウザはtextareaためresizeイベントをトリガしません。代わりに、mouseupまたはtouchendイベントをリッスンする必要があります。これは、ユーザーがリサイズした後に発生します。しかし、これらのイベントはtextareaをクリックするだけでトリガすることができるので、実際にサイズが変更されたかどうかを判断するには、要素の新しいサイズを古いサイズと比較することをおすすめします。