如何在React中传递带有事件处理函数的道具？

Question

我正在尝试运行一个简单的应用程序，这个应用程序呈现了我一生中在阵列中给出的不同昵称。

我有两个组件，pushMe组件作为子按钮，nameFinder作为父组件。 我正在尝试将我的display（）方法作为onClick事件传递给我的pushMe按钮组件，但该按钮不会呈现任何结果。 我想弄清楚我错过了什么。

 import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; import { PushMe } from "../components/PushMe"; class MyName extends React.Component { display() { //This will keep constant range from 1-10. var pickNickname = Math.floor(Math.random() * 11); let alias = ["Terrence", "T", "TT", "Trey"]; let name; //This conditional statement will decide the name by determining a number from a variable. if (pickNickname <= 5) { name = <h1>Today, my name is {alias[0]}</h1>; } else if ((pickNickname = 6 || 7)) { name = <h1> Today, my name is {alias[1]}</h1>; } else if ((pickNickname = 8)) { name = <h1> Today, my name is {alias[2]}</h1>; } else { name = <h1> Today, my name is {alias[3]}</h1>; } } render() { return ( <div className="myNameApp"> <PushMe display={this.display} /> </div> ); } } ReactDOM.render(<MyName />, document.getElementById("root")); 

 import React from "react"; export class PushMe extends React.Component { render() { return <button onClick={this.props.display}> Push Me </button>; } } 

Answer 1

按下按钮后，您需要在渲染方法中渲染结果。 将值推入状态并呈现内容。 还绑定显示方法以访问正确的上下文，如

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { PushMe } from "../components/PushMe";

class MyName extends React.Component {
  display = () => {
    //This will keep constant range from 1-10.
    var pickNickname = Math.floor(Math.random() * 11);
    let alias = ["Terrence", "T", "TT", "Trey"];
    let name;

    //This conditional statement will decide the name by determining a number from a variable.
    if (pickNickname <= 5) {
      name = alias[0];
    } else if ((pickNickname = 6 || 7)) {
      name = alias[1]
    } else if ((pickNickname = 8)) {
      name = alias[2]
    } else {
      name = alias[3]
    }
    this.setState({name});
  }

  render() {
    return (
      <div className="myNameApp">
         {this.state.name && <h1>Today, my name is {this.state.name}</h1>} 
        <PushMe display={this.display} />
      </div>
    );
  }
}

ReactDOM.render(<MyName />, document.getElementById("root"));

Answer 2

 import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; import { PushMe } from "../components/PushMe"; class MyName extends React.Component { constructor(props) { super(props); this.state = {name: ''}; this.display = this.display.bind(this); } display = () => { //This will keep constant range from 1-10. var pickNickname = Math.floor(Math.random() * 11); let alias = ["Terrence", "T", "TT", "Trey"]; let name; //This conditional statement will decide the name by determining a number from a variable. if (pickNickname <= 5) { name = alias[0]; } else if ((pickNickname = 6 || 7)) { name = alias[1]; } else if ((pickNickname = 8)) { name = alias[2]; } else { name = alias[3]; } this.setState({ name }); }; render() { return ( <div className="myNameApp"> {this.state.name && <h1> Today, my name is {this.state.name} </h1>} <PushMe display={this.display} /> </div> ); } } ReactDOM.render(<MyName />, document.getElementById("root")); 

在创建构造函数，绑定我的显示方法以及设置我的名称变量的状态后，我能够弄清楚它！