Synthetic Touch Event in React

Question

With the following .js, resizing the text area in browser doesn't present any touch event type, although the other events work as expected.

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

score 0 · Answer 1 · answered Mar 15 '17 at 22:38

Basically no browsers will trigger a resize event for textarea. Instead you have to listen for mouseup or touchend events which will happen after the user has resized. But since those events can also be triggered for simply clicking in the textarea, you might want to compare the new size of the element to the old size to determine if it was actually resized or not.

Synthetic Touch Event in React

1 Answers1