美文网首页
react事件绑定方式与传参问题

react事件绑定方式与传参问题

作者: 足够幸运 | 来源:发表于2018-04-04 10:18 被阅读1108次

    一、事件绑定方式
    ①在构造函数中绑定this,例如:

    constructor(props){
            super(props);
            this.pageGoto=this.pageGoto.bind(this);
        }
    

    ②如果您使用实验性的 属性初始化语法,那么你可以使用属性初始值设置来正确地 绑定(bind) 回调:

    class LoggingButton extends React.Component {
      // 这个语法确保 `this` 绑定在 handleClick 中。
      // 警告:这是 *实验性的* 语法。
      handleClick = () => {
        console.log('this is:', this);
      }
      render() {
        return (
          <button onClick={this.handleClick}>
            Click me
          </button>
        );
      }
    }
    

    ③箭头函数的方式:

    <button onClick={(e) => this.handleClick(e)}>
            Click me
    </button>
    

    这个语法的问题是,每次 LoggingButton 渲染时都创建一个不同的回调。在多数情况下,没什么问题。然而,如果这个回调被作为 prop(属性) 传递给下级组件,这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定,以避免这类性能问题。
    二、传参问题
    在循环内部,通常需要将一个额外的参数传递给事件处理程序。 例如,如果 id 是一个内联 ID,则以下任一方式都可以正常工作:

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

    上述两行代码是等价的,分别使用 ·arrow functionsFunction.prototype.bind

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

    相关文章

      网友评论

          本文标题:react事件绑定方式与传参问题

          本文链接:https://www.haomeiwen.com/subject/ytxkhftx.html