React 事件 4

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

将参数传递给事件处理程序

在循环内部，通常需要将额外的参数传递给事件处理程序。例如，如果id是行ID，则以下任何一个都可以工作：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上面两行是等价的，并使用箭头功能和Function.prototype.bind分别。

在这两种情况下，e表示React事件的参数将作为ID之后的第二个参数传递。使用箭头函数，我们必须显式传递它，但bind任何进一步的参数都会自动转发。

下面是3个点击事件的Demo:

1.使用bind的绑定事件：

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// This binding is necessary to make `this` work in the callbackthis.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(state => ({isToggleOn: !state.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}
}ReactDOM.render(<Toggle />,document.getElementById('root')
);

2.使用组件属性等于一个函数的绑定事件

class LoggingButton extends React.Component {constructor(props){super(props);this.state = {a:12}}handleClick = () => {console.log('this is:', this);this.setState(state=>({a:123 }));}render() {return (<button onClick={this.handleClick}>Click me{this.state.a}</button>);}
}ReactDOM.render(<LoggingButton />,document.getElementById('root')
);

3.在回调中使用箭头函数

class LoggingButton extends React.Component {handleClick() {console.log('this is:', this);}render() {// This syntax ensures `this` is bound within handleClickreturn (<button onClick={(e) => this.handleClick(e)}>Click me</button>);}
}

4.登录和登出事件，加条件判断

class LoginControl extends React.Component {constructor(props) {super(props);this.handleLoginClick = this.handleLoginClick.bind(this);this.handleLogoutClick = this.handleLogoutClick.bind(this);this.state = {isLoggedIn: false};}handleLoginClick() {this.setState({isLoggedIn: true});}handleLogoutClick() {this.setState({isLoggedIn: false});}render() {const isLoggedIn = this.state.isLoggedIn;let button;if (isLoggedIn) {button = <LogoutButton onClick={this.handleLogoutClick} />;} else {button = <LoginButton onClick={this.handleLoginClick} />;}return (<div><Greeting isLoggedIn={isLoggedIn} />{button}</div>);}
}function UserGreeting(props) {return <h1>Welcome back!</h1>;
}function GuestGreeting(props) {return <h1>Please sign up.</h1>;
}function Greeting(props) {const isLoggedIn = props.isLoggedIn;if (isLoggedIn) {return <UserGreeting />;}return <GuestGreeting />;
}function LoginButton(props) {return (<button onClick={props.onClick}>Login</button>);
}function LogoutButton(props) {return (<button onClick={props.onClick}>Logout</button>);
}ReactDOM.render(<LoginControl />,document.getElementById('root')
);

5.input输入配合点击事件实现input输入的内容出现弹窗

function FancyBorder(props) {return (<div className={'FancyBorder FancyBorder-' + props.color}>{props.children}</div>);
}function Dialog(props) {return (<FancyBorder color="blue"><h1 className="Dialog-title">{props.title}</h1><p className="Dialog-message">{props.message}</p>{props.children}</FancyBorder>);
}class SignUpDialog extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);this.handleSignUp = this.handleSignUp.bind(this);this.state = {login: ''};}render() {return (<Dialog title="Mars Exploration Program"message="How should we refer to you?"><input value={this.state.login}onChange={this.handleChange} /><button onClick={this.handleSignUp}>Sign Me Up!</button></Dialog>);}handleChange(e) {this.setState({login: e.target.value});}handleSignUp() {alert(`Welcome aboard, ${this.state.login}!`);}
}ReactDOM.render(<SignUpDialog />,document.getElementById('root')
);

React 事件 4相关推荐

React事件机制 - 源码概览（下）
上篇文档 React事件机制 - 源码概览(上)说到了事件执行阶段的构造合成事件部分,本文接着继续往下分析批处理合成事件入口是 runEventsInBatch // runEventsInBat ...
React事件系统研究总结
React作为目前前端业界最流行的mvvm框架之一已经被广大前端同学所熟知,而在日常工作中已经熟悉使用React的我们对React内部的工作流程.设计理念是否又有足够的了解呢?本文是对于React事件 ...
React事件的问题
React 把事件委托到 document 对象上. 当真实 DOM 元素触发事件,先处理原生事件,然后会冒泡到 document 对象后,再处理 React 事件. React事件绑定的时刻是在 r ...
彻底搞懂原生事件流和 React 事件流
事件系统,业务开发中只要需要与用户进行交互,那么事件是必不可少的,dom 中存在很多事件,比如 click,scroll,focus 等等.我们将深入事件系统中,以及事件中常用的一些操作比如 prev ...
React 事件onClick
React 事件处理(冒泡及阻止默认事件) react 事件注意的点以及案例详情 1.驼峰形式 onClick 2.调用 onClick={this.Fn}this指向问题 3.解决指向1.箭头函数 ...
React事件优雅绑定
2018-01-11 19:00 更新(目前最优解) 收到光同学的提醒,与其让ESLint报错,不如在调用时候做一些修改,上代码,就是在调用事件的时候,重新用箭头函数再包裹一层,拍脑袋表示为啥自己 ...
React 事件总结
目录一绑定事件处理函数 1.1 鼠标类 1.2 拖拽事件: 1.3 触摸 1.4 键盘 1.5 剪切类 1.6 表单类 1.7 焦点事件 1.8 UI元素类 1.9 滚动 1.10 组成事件 1. ...
react事件组件设计传参使用
1.事件和原生js事件一致事件命名用驼峰式 onclick onClick onmouseover onMouseover 事件总是要响应一个函数 render() {return ( <d ...
04.React事件方法、 React定义方法的几种方式获取数据改变数据执行方法传值...
2019独角兽企业重金招聘Python工程师标准>>> 一.基本用法在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要 ...

React 事件 4

承接微信小程序开发。扫码加微信。

将参数传递给事件处理程序

React 事件 4相关推荐

最新文章

热门文章