Javascript

react 点击事件传参

本文主要是介绍react 点击事件传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

方法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>
这篇关于react 点击事件传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航