React 事件处理

相关文章推荐
风流倜傥的饭卡 · nuxt点击事件无法触发 - CSDN文库· 1 年前 ·
闷骚的黑框眼镜 · 一个注解实现 WebSocket ...· 1 年前 ·
气势凌人的打火机 · app:layout_constrained ...· 2 年前 ·
文质彬彬的拐杖 · 03.UniRx序列（Interval、Ti ...· 2 年前 ·
乐观的番茄 · iframe ...· 2 年前 ·
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，你必须明确使用 preventDefault 。
例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：
<a href="#" onclick="console.log('点击链接'); return false">
在 React 的写法为：
实例中 e 是一个合成事件。
使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮：
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
尝试一下 »
你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：
class LoggingButton extends React.Component {
  // 这个语法确保了 `this` 绑定在  handleClick 中
  // 这里只是一个测试
  handleClick = () => {
    console.log('this is:', this);
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
如果你没有使用属性初始化器语法，你可以在回调函数中使用 箭头函数：
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
向事件处理程序传递参数
通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述两种方式是等价的。
上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:
class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    render(){
        return (
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
		#0   阿珂
  pin***affie2018@gmail.com
   参考地址
 10
React 点击事件的 bind(this) 如何传参?

需要通过 bind 方法来绑定参数，第一个参数指向 this,第二个参数开始才是事件函数接收到的参数:
<button onClick={this.handleClick.bind(this, props0, props1, ...}></button>
handleClick(porps0, props1, ..., event) {
    // your code here
事件：this.handleclick.bind(this，要传的参数)
函数：handleclick(传过来的参数，event)
从 render 中传递参数到 外部函数 one():
class Ex extends React.Component{
....  this.state={name:'Stupid Dog'};
... ... ...
function one(para){
    console.log('parameter in one Func',para);
... ... ...
render(){    
    var mm='AABB';
    return (<div><button onClick={this.one.bind(this,mm)}> test</button>
    <button onClick={this.one.bind(this,this.state.name)}> test</button></div>);
阿珂   阿珂
  pin***affie2018@gmail.com
   参考地址
5年前 (2018-07-26)

#0   YuCun Zhong
  www***26613280@qq.com
   参考地址




    
 36
理解 React 中 es6 创建组件 this 的方法

在JavaScript中，this对象是运行时基于函数的执行环境（也就是上下文）绑定的。
从 react 中的 demo 说起
Facebook最近一次更新react时，将es6中的class加入了组件的创建方式当中。Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类。官方的demo：
class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    this.handleClick = this.handleClick.bind(this);
  handleClick() {
    this.setState({liked: !this.state.liked});
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
上面的demo中有大量this的使用，在 class LikeButton extends React.Component 中我们是声明该class，因为this具体是由其上下文决定的，因此在类定义中我们无法得知this用法。 相当于是new了上面定义的类，首先调用 constructor() 函数， this.state 的this上下文就是该实例对象；同理，render() 函数中 this.state.liked 的this上下文也是该对象。问题在于 onClick={this.handleClick} ，获取该函数引用是没有问题，这里的this上下文就是该对象。
这时问题来了，在原来 React.createClass 中， handleClick() 在onClick事件触发的时候，会自动绑定到LikeButton实例上，这时候该函数的this的上下文就是该实例。不过在ES6的class的写法中，Facebook取消了自动绑定，实例化LikeButton后，handleClick()的上下文是div的支撑实例（ backing instance ），而 handleClick() 原本要绑定的上下文是LikeButton的实例。对于该问题，我们有多种解决方案。
使用 bind() 函数改变 this 的上下文
可以在class声明中的constructor()函数中，使用：
this.handleClick = this.handleClick.bind(this);
该方法是一个bind()绑定，多次使用。在该方法中，我们在声明该实例后，可以在该实例任何地方使用 handleClick() 函数，并且该 handleClick() 函数的this的上下文都是LikeButton实例对象。
除此我们也可以在具体使用该函数的地方绑定this的上下文到LikeButton实例对象，代码如下：
<div onClick={this.handleClick.bind(this)}>
  You {text} this. Click to toggle.
这种方法需要我们每次使用bind()函数绑定到组件对象上。
es6的箭头函数
es6中新加入了箭头函数=>，箭头函数除了方便之外还有而一个特征就是将函数的this绑定到其定义时所在的上下文。这个特征也可以帮助我们解决这个问题。使用如下代码：
<div onClick={() => this.handleClick()}>
  You {text} this. Click to toggle.
这样该 this.handleClick() 的上下文就会被绑定到 LikeButton 的实例对象上。个人认为，使用箭头函数使得 JavaScript 更加接近面向对象的编程风格。
this 的总结
this 的本质就是：this跟作用域无关的，只跟执行上下文有关。YuCun Zhong   YuCun Zhong
  www***26613280@qq.com
   参考地址
5年前 (2018-10-20)

#0   阿星
  192***540@qq.com
 35
React 事件中 this 的三种使用方式

1.bind绑定的方法
class Hello extends React.Component{
    constructor(){
        super()
        this.state = {
            content:true
        this.change = this.change.bind(this)
    change(){
        this.setState({
            content:!this.state.content
    render(){
        return (
                <h1>{this.state.content ? '1':'2'}</h1>
                <h2>{this.props.name}</h2>
                <button onClick={this.change}>
                </button>
ReactDOM.render(
    <Hello name="Hello"/>,
    document.getElementById('example')
class Hello extends React.Component{
    constructor(){
        super()
        this.state = {
            content:true
        this.change = this.change.bind(this,this.state.content)
    change(obj){
        this.setState({
            content:!this.state.content
        console.log(obj)
        console.log(this.state.content)
    render(){
        return (
                <h1>{this.state.content ? '1':'2'}</h1>
                <h2>{this.props.name}</h2>
                <button onClick={this.change}>
                </button>
ReactDOM.render(
    <Hello name="Hello"/>,
    document.getElementById('example')
2.属性初始化器的方式
class Hello extends React.Component{
    constructor(){
        super()
        this.state = {
            content:true
    change=()=>{
        this.setState({
            content:!this.state.content
    render(){
        return (
                <h1>{this.state.content ? '1':'2'}</h1>
                <h2>{this.props.name}</h2>
                <button onClick={this.change}>
                </button>
ReactDOM.render(
    <Hello name="Hello"/>,
    document.getElementById('example')
class Hello extends React.Component{
    constructor(){
        super()
        this.state = {
            content:true
    change=obj=>{
        this.setState({
            content:!this.state.content
        console.log(obj)
    render(){
        return (
                <h1>{this.state.content ? '1':'2'}</h1>
                <h2>{this.props.name}</h2>
                <button onClick={this.change(this.state.content)}>
                </button>
ReactDOM.render(
    <Hello name="Hello"/>,
    document.getElementById('example')
3.回调函数的方式
class Hello extends React.Component{
    constructor(){
        super()
        this.state = {
            content:true
    change(){
        this.setState({
            content:!this.state.content
    render(){
        return (
                <h1>{this.state.content ? '1':'2'}</h1>
                <h2>{this.props.name}</h2>
                <button onClick={()=>{this.change()}}>
                </button>
ReactDOM.render(
    <Hello name="Hello"/>,
    document.getElementById('example')
class Hello extends React.Component{
    constructor(){
        super()
        this.state = {
            content:true
    change(obj){
        this.setState({
            content:!this.state.content
        console.log(obj)
    render(){
        return (
                <h1>{this.state.content ? '1':'2'}</h1>
                <h2>{this.props.name}</h2>
                <button onClick={()=>{this.change(this.state.content)}}>
                </button>
ReactDOM.render(
    <Hello name="Hello"/>,
    document.getElementById('example')
)阿星   阿星
  192***540@qq.com
4年前 (2019-06-05)

             HTML / CSSHTML 教程
HTML5 教程
CSS 教程
CSS3 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Font Awesome 教程
Foundation 教程
 JavaScriptJavaScript 教程
HTML DOM 教程
jQuery 教程
AngularJS 教程
AngularJS2 教程
Vue.js 教程
Vue3 教程
React 教程
TypeScript 教程
jQuery UI 教程
jQuery EasyUI 教程
Node.js 教程
AJAX 教程
JSON 教程
Echarts 教程
Chart.js 教程
Highcharts 教程
Google 地图 教程
 服务端Python 教程
Python2.x 教程
Linux 教程
Docker 教程
Ruby 教程
Java 教程
C 教程
C++ 教程
Perl 教程
Servlet 教程
JSP 教程
Lua 教程
Rust 教程
Scala 教程
Go 教程
PHP 教程
数据结构与算法
Django 教程
Zookeeper 教程
设计模式
正则表达式
Maven 教程
Verilog 教程
ASP 教程
AppML 教程
VBScript 教程
 数据库SQL 教程
MySQL 教程
PostgreSQL 教程
SQLite 教程
MongoDB 教程
Redis 教程
Memcached 教程
 数据分析Python 教程
NumPy 教程
Pandas 教程
Matplotlib 教程
Scipy 教程
R 教程
Julia 教程
 移动端Android 教程
Swift 教程
jQuery Mobile 教程
ionic 教程
Kotlin 教程
 XML 教程XML 教程
DTD 教程
XML DOM 教程
XSLT 教程
XPath 教程
XQuery 教程
XLink 教程
XPointer 教程
XML Schema 教程
XSL-FO 教程
SVG 教程
 ASP.NETASP.NET 教程
C# 教程
Web Pages 教程
Razor 教程
MVC 教程
Web Forms 教程
 Web ServiceWeb Service 教程
WSDL 教程
SOAP 教程
RSS 教程
RDF 教程
 开发工具Eclipse 教程
Git 教程
Svn 教程
Markdown 教程
 网站建设HTTP 教程
网站建设指南
浏览器信息
网站主机教程
TCP/IP 教程
W3C 教程
网站品质