React 教程第四篇 —— 组件事件
发布时间:2020-12-15 06:26:56 所属栏目:百科 来源:网络整理
导读:事件和 ref 事件可以直接写到 DOM 节点,然后通过 ref 来获取 DOM 节点 import React from 'react';import ReactDOM from 'react-dom';class Component1 extends React.Component{ focusHandler(){ this.refs.name.focus(); } render(){ return ( div input
事件和 ref事件可以直接写到 DOM 节点,然后通过 ref 来获取 DOM 节点 import React from 'react'; import ReactDOM from 'react-dom'; class Component1 extends React.Component{ focusHandler(){ this.refs.name.focus(); } render(){ return ( <div> <input type="text" name="name" placeholder="" ref="name"/> <input type="button" name="" value="focus" onClick={this.focusHandler} /> </div> ); } }; ReactDOM.render(<Component1/>,document.getElementById('div1')); 效果预览 事件对象 —— eventReact 在事件方法调用上默认会传一个形参 import React from 'react'; import ReactDOM from 'react-dom'; class Component1 extends React.Component{ submit(e){ e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={this.submit}/> } } ReactDOM.render( <Component1 />,document.getElementById('app') ) 事件 —— this 指针在所有的事件当中,首先都要弄明白 事件定义使用箭头函数class Component1 extends React.Component{ submit = (e) => { console.log(this) e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={this.submit}/> } } 事件调用时使用用箭头函数class Component1 extends React.Component{ submit(e){ console.log(this) e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={(e) => this.submit(e)}/> } } 构造函数中使用 bindclass Component1 extends React.Component{ constructor(props){ super(props) this.submit = this.submit.bind(this); } submit(e){ console.log(this) e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={this.submit}/> } } 事件调用时用 bindclass Component1 extends React.Component{ submit(e){ console.log(this) e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={this.submit.bind(this)}/> } } 事件传参数事件调用时使用用箭头函数class Component1 extends React.Component{ submit(e,n){ console.log(this,n) e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={(e) => this.submit(e,100)}/> } } 事件调用时用 bindsubmit(n,e){ console.log(n) e.target.style.color = 'red' } render(){ return <input type="button" value="submit" onClick={this.submit.bind(this,20)}/> } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |