无法从 React Js 按钮单击调用函数

Question

我有 Message.js -import React from 'react';import { Button } from 'reactstrap';class Message extends React.Component{    constructor()    {super()this.state={    message:"This is message"}    }    changeMessage() {        alert("In");        this.setState({            message :"message changed"        });    }    render=()=> {        return <div>            <h1>{this.state.message}</h1>            <Button onClick="{this.changeMessage}" color="success">success</Button>        </div>    }}export default Message按钮点击在这里不起作用。我尝试过 -<Button onClick={changeMessage} color="success">success</Button>然后也尝试过 -<Button onClick="changeMessage()" color="success">success</Button>这也行不通。Uncaught TypeError : this.props.onClick is not a function.

Answer 1

class Message extends React.Component {

  constructor() {

    super();

    this.state = {

      message: "This is message",

    };

  }

  changeMessage = () => {

    alert("In");

    this.setState({

      message: "message changed",

    });

  };

  render = () => {

    return (

      <div>

        <h1>{this.state.message}</h1>

        <button onClick={this.changeMessage} color="success">

          success

        </button>

      </div>

    );

  };

}

export default Message;

Answer 2

onClick={this.changeMessage} need not to be a string .

尝试这个 ：

<Button onClick={()=>this.changeMessage()} color="success">success</Button>

Answer 3

您传递的 onClick 应该是一个函数，并且该函数必须绑定到在“ changeMessage ”函数内使用“ this ”指针，因此您可以尝试使用如下，

<Button onClick={this.changeMessage.bind(this)} color="success">success</Button>

Answer 4

<Button onClick={this.changeMessage} color="success">success</Button>

<Button onClick={() => {this.changeMessage(your params)}} color="success">success</Button>

Answer 5

你不需要在reactjs中引用函数。

就这样分配吧。

<Button onClick={this.changeMessage} color="success">success</Button>

和功能

changeMessage = () => {

        alert("In");

        this.setState({

            message :"message changed"

        });

    }