Question

我有下面的代码可以处理onClick。

class Formi extends Component {
    onSaveTable(data, ev){
        ev.preventDefault()
        console.log(data) // logs OK
    }
    render() {
       // ...
       <button type="button" className="btn btn-success pull-left " 
           onClick= {this.onSaveTable.bind(this,data)}>Update table</button>
       //
    }
}

我希望在构造函数中执行绑定操作，如下所示：

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

并使用参数调用它：

     <button type="button" className="btn" 
           onClick= {this.onSaveTable(this,data)}>Update table</button>
     // or using arrow function: onClick= { () => this.onSaveTable(this,data)}

但是这些选项似乎都不起作用。

我想念什么？

Answer 1

如果您在构造函数中出价，则无法发送参数。因此根本不需要将其绑定到任何地方，只需将其包装在箭头功能周围即可。

<button type="button" className="btn" 
       onClick= {(event)=>this.onSaveTable(event,data)}>Update table</button>

如果您使用的是箭头功能（将类方法作为箭头功能或通过包装到箭头功能中在事件上调用它们），则无需绑定该功能。

Answer 2

1）使用bind

class Formi extends Component {

    constructor (props){
        super(props);
        this.onSaveTable = this.onSaveTable.bind(this);
    }
    onSaveTable(data, ev){
        ev.preventDefault()
        console.log(data) // logs OK
    }
    render() {
       // ...
       <button type="button" className="btn btn-success pull-left " 
           onClick= {(event) => this.onSaveTable(data, event)}>Update table</button>
       //
    }
}

2）使用箭头函数和currying ...

class Formi extends Component {

    constructor (props){
        super(props);
        // No need to bind now
    }
    onSaveTable = data => ev => {
        ev.preventDefault()
        console.log(data) // logs OK
    }
    render() {
       // ...
       <button type="button" className="btn btn-success pull-left " 
           onClick= {this.onSaveTable(data)}>Update table</button>
       //
    }
}

Answer 3

无需在构造函数中显式绑定它。使用箭头功能时，上下文将自动设置为组件。

只需使用：

<button type="button" className="btn" 
       onClick= { (ev) => this.onSaveTable(ev,data)}>Update table</button>

如何在构造函数中绑定事件处理程序并在React中使用参数调用它？

3 个答案: