React中的合成触摸事件

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中单击即可触发这些事件，因此您可能希望将元素的新大小与旧大小进行比较，以确定它是否实际调整了大小。