Question

该函数在页面加载我的代码时起作用，如下所示
父母

UIPercentDrivenInteractiveTransition

孩子

import React, { Component } from "react";
import ExtnButton from "./Button";
class MovieList extends Component {
  handleDelete = index => {
    console.log("inside handleDelete:");
  };
 render() {
    return (
      <React.Fragment>
     <ExtnButton handleDelete={this.handleDelete} index={index} />
      </React.Fragment>
    );
  }
}
export default MovieList;

但是在页面加载功能handleDelete调用时没有任何点击事件

Answer 1

错误：

onClick={this.props.handleDelete(this.props.index)}

正确：

onClick={() => this.props.handleDelete(this.props.index)}

Answer 2

这是因为您是直接在onClick事件中调用方法。可以使用三种方法将事件与参数绑定：

使用嵌入式箭头功能：

onClick={() => this.props.handleDelete(this.props.index)}

使用公共类方法（如您目前所使用的那样），但只需要咖喱：

handleDelete = index => () => {
  console.log("inside handleDelete:");
};

使用绑定方法：

handleDelete(index) {...}

但是，为此，您需要将this绑定到构造函数中。

this.handleDelete = this.handleDelete.bind(this)

如果您需要通过活动：

(using inline arrow function)
onClick={(e) => this.props.handleDelete(this.props.index, e)}
(using public class method)
handleDelete = index => e => {
  console.log(e);
};

请注意，如果您使用嵌入式箭头功能，则无需使用该功能。很好：

handleDelete = index => {...}

或者，不使用公共类方法（即绑定方法）：

handleDelete(index) {...}

React.js函数在onClick事件之前在页面加载时调用

2 个答案: