React学习分享05：React组件的事件处理

一、React组件的事件处理

1、通过onXXX指定事件处理的函数

• React使用的是自定义（合成）事件，而不是原生DOM事件 ---为了更好的兼容性

• React中的事件是通过事件委托方式进行处理的（委托给最外层的元素） ---为了高效

2、通过event.target得到发生事件的DOM元素对象 ---防止过度使用refs

class InputBox extends React.Component{
            /*
                1、通过onXXX指定事件处理的函数
                    React使用的是自定义（合成）事件，而不是原生DOM事件  ---为了更好的兼容性
                    React中的事件是通过事件委托方式进行处理的（委托给最外层的元素） ---为了高效
                2、通过event.target得到发生事件的DOM元素对象 ---防止过度使用refs
            */

            ref1 = React.createRef();

            showData = ()=>{
                const {current} = this.ref1;
                alert(current.value)
            }

            showData2 = (event)=>{
                const {target} = event;
                alert(target.value)
            }

            render() {
                return <dev>
                            <input ref={this.ref1} type="text" />
                            <button id="btn" onClick = {this.showData} >提示数据数据</button>
                            <input onBlur = {this.showData2} type="text" />
                        </dev>
            }
        }

        ReactDOM.render(<InputBox/>,document.getElementById("box"));

二、React中收集表单的数据

1、非受控组件

得通过Ref拿到对应组件DOM元素称为非受控组件。

2、受控组件

不用通过Ref拿到对应组件DOM元素称为非受控组件，使用函数回调event。