开发者问题收集

ReactJS 使用 onClick 调用两个函数

2020-12-29
142
javascript reactjs onclick

我想使用 onClick 一次调用两个函数。

我使用的代码： 

<li
    key={index}
    onClick={this.onClick}
    style={{ color: this.state.Colour }}
>

changeColour = (i) => {
        console.log(i);
        this.setState({
            Colour: 'grey',
        });
    };
    crossLine = (event) => {
        const element = event.target;
        element.classList.toggle('crossed-line');
    };
    onClick() {
        this.changeColour();
        this.crossLine();
    }

但是，当我运行 npm start 并转到 http://localhost:3000 时，它告诉我： 

TypeError: undefined is not an object (evaluating 'this.changeColour')

出了什么问题？

新编辑： 

changeColour = () => {
        this.setState({
            Colour: 'grey',
        });
    };
    crossLine = (event) => {
        const element = event.target;
        element.classList.toggle('crossed-line');
    };
    onButtonClick = () => {
        this.changeColour();
        this.crossLine();
    };

<li
                                key={index}
                                onClick={this.onButtonClick}
                                style={{ color: this.state.Colour }}
                            >
                                {item}
                </li>

抱歉，第二个的格式不对..

3个回答

您应该将 onClick 定义为箭头函数。否则， this 是未定义的，除非您将其 bind 到当前上下文。 此外，与 undefined 问题无关，但您应该将参数传递给函数调用。

Thunderbolt Engineer
2020-12-29

按照其中一个答案中的建议，使用函数绑定或仅选择箭头函数： 

<li
    key={index}
    onClick={(event)=>this.onButtonClick(event, index)}
    style={{ color: this.state.Colour }}
>

changeColour = (i) => {
        console.log(i);
        this.setState({
            Colour: 'grey',
        });
    };

    crossLine = (event) => {
        const element = event.target;
        element.classList.toggle('crossed-line');
    };

    onButtonClick=(event, index)=> {
        this.changeColour(index);
        this.crossLine(event);
    }

基于问题描述的完整示例（更多详细信息甚至会有所帮助：D）：

输出：

在此处输入图像描述

源代码： 

import React, { Component } from "react";
import "./style.css";
const list = ["One", "Two", "Three", "Four", "Five"];
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Colour: "black"
    };
  }
  changeColour = i => {
    console.log(i);
    this.setState({
      Colour: "grey",
      index: i
    });
  };

  crossLine = event => {
    const element = event.target;
    console.log(element);
    element.classList.toggle("crossed-line");
  };

  onButtonClick = (event, index) => {
    this.changeColour(index);
    this.crossLine(event);
  };

  render() {
    return (
      <div>
        <ul>
          {list.map((elem, index) => (
            <li
              className={index == this.state.index ? "crossed-line" : null}
              key={index}
              onClick={event => this.onButtonClick(event, index)}
              style={{
                color: index == this.state.index ? this.state.Colour : "black"
              }}
            >
              {elem}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

css： 

h1,
p {
  font-family: Lato;
}
.crossed-line {
  text-decoration: line-through;
}

工作应用程序： Stackblitz

Ketan Ramteke
2020-12-29

第一：你必须在构造函数内部绑定函数，如下所示： 

constructor() {
  super();
  this.onButtonClick = this.onButtonClick.bind(this);
}

第二：你需要将事件和索引传递给 onButtonClick 函数（ 我建议你使用箭头函数 ）： 

<li
  key={index}
  onClick={(event) => this.onButtonClick(event, index)}
  style={{ color: this.state.Colour }}
>

这样，函数 onButtonClick 就可以接收事件，从而将其传递给函数 crossLine，留下类似于这样的代码： 

changeColour = (index) => {
    console.log(index);
    this.setState({
        Colour: 'grey',
    });
};

crossLine = (event) => {
    const element = event.target;
    element.classList.toggle('crossed-line');
};

onButtonClick=(event, index)=> {
    this.changeColour(index);
    this.crossLine(event);
}
Proskynete
2020-12-29