react 点击事件传参

最新推荐文章于 2024-04-28 08:12:16 发布

我们都是柠檬精诶

最新推荐文章于 2024-04-28 08:12:16 发布

阅读量2.7k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_43392573/article/details/117962116

版权

React 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

方法1

<button onClick={(e)=> this.deleteRow( id, e )}>方法1</button>

方法2

<button onClick={ this.deleteRow.bind( this, id)}>方法2</button>

上述两种方式是等价的。

上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    // 事件对象 e 要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
                {/* 通过 箭头函数 方法传递参数。 */}
				<a href="https://reactjs.org" onClick={(e)=>this.preventPop(this.state.name,e)}>Click</a>
            </div>
        );
    }
}

ReactDOM.render(
  <Popper />,
  document.getElementById('example')
);
</script>

</body>
</html>

我们都是柠檬精诶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react 点击事件传参

方法1<button onClick={(e)=> this.deleteRow( id, e )}>方法1</button>方法2<button onClick={ this.deleteRow.bind( this, id)}>方法2</button>上述两种方式是等价的。上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对
复制链接

扫一扫