织梦网站模板,申请企业资助建设网站,微信网站需要一个域名要怎么做,罗湖区住房和建设网站React 中 通过 onXxx 属性指定事件处理函数#xff08;注意大小写#xff09;#xff0c;通过 event.target 得到发生事件的 DOM 元素对象
不要过度使用 ref #xff08;比如#xff0c;元素获取自身属性时#xff0c;通过 event 对象#xff0c;而不是 ref#xff09…React 中 通过 onXxx 属性指定事件处理函数注意大小写通过 event.target 得到发生事件的 DOM 元素对象
不要过度使用 ref 比如元素获取自身属性时通过 event 对象而不是 ref
原理
为了更好的兼容性React 使用的是自定义合成事件而不是使用的原生 DOM 事件
为了的高效React 中的事件是通过事件委托方式处理的委托给组件最外层的元素
code
!DOCTYPE html
html langen
headmeta charsetUTF-8title事件处理/title
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel// 创建组件class Demo extends React.Component {// 创建ref容器myRef React.createRef()myRef2 React.createRef()// 展示左侧输入框的数据showData (event) {console.log(left, event) // event 为 按钮alert(this.myRef.current.value)}// 展示右侧输入框的数据showData2 (event) {console.log(right, event) // event 为 右侧 inputalert(event.target.value)}render() {return (div {/* 事件委托机制React会把事件加在最外层元素div 身上 */}input ref{this.myRef} typetext placeholder点击按钮提示数据 /nbsp;button onClick{this.showData}点我提示左侧的数据/buttonnbsp;input onBlur{this.showData2} typetext placeholder失去焦点提示数据 /nbsp;/div)}}// 渲染组件到页面ReactDOM.render(Demo /, document.getElementById(test))/script
/body/html
