Функция Reactjs, вызывающая загрузку страницы перед событием onClick - PullRequest
Новая
       20

Функция Reactjs, вызывающая загрузку страницы перед событием onClick

0 голосов
/ 17 сентября 2018

Функция работает, пока страница загружает мой код следующим образом
Родитель 

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;


Дети 

import React, { Component } from "react";
class Button extends Component {
  state = {};
  render() {
    return (
      <button
        onClick={this.props.handleDelete(this.props.index)}
        className="btn btn-danger"
      >
        Delete
      </button>
    );
  }
}
 export default Button;

Но при загрузке страницы функция handleDelete вызывается без какого-либо события щелчка

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Это потому, что вы вызываете метод внутри события 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) {...}
0 голосов
/ 17 сентября 2018

Неправильно: 

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

Правильно: 

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