react学习笔记【4】（React中的事件处理）

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

• 英文：https://react.dev/
• 中文：https://react.docschina.org/

react中的事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)
   a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件 ———— 为了更好的兼容性
   b.React的事件是通过事件委托方式处理的（委托给组件最外层元素）———— 为了更高效
2. 通过event.target得到发生事件的DOM元素 ———— 不要过度使用ref

<script type="text/babel">
    // 创建组件
    class MyComponent extends React.Component {
        input1 = React.createRef();
        input2 = React.createRef();
        // 按钮点击事件
        handleClick = () => {
            alert(`提示数据：${this.input1.current.value}`)
        }
        // 失去焦点事件
        handleBlur = (event) => {
            alert(`提示数据：${event.target.value}`)
        }
        render() {
            return (
                <div>
                    <input ref={this.input1} type="text" placeholder="按钮触发" />&nbsp;
                    <button onClick={this.handleClick}>点击触发左侧</button>&nbsp;
                    <input onBlur={this.handleBlur} type="text" placeholder="失去焦点触发" />
                </div>
            )
        }
    }
    // 渲染页面
    ReactDOM.render(<MyComponent />, document.getElementById('test'));
</script>