如何在 React 中使用事件处理函数传递道具？答案

【问题标题】：How to pass a prop with an event handler function in React?如何在 React 中使用事件处理函数传递道具？
【发布时间】：2019-07-06 12:19:17
【问题描述】：

我正在尝试运行一个简单的应用程序，该应用程序将我一生中得到的不同昵称呈现在一个数组中。

我总共有两个组件，作为子按钮的 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>;
  }
}

【问题讨论】：

你对我有什么期待？您的显示功能正在运行，它应该正确设置名称，但是您实际上并没有对 name 做任何事情吗？
这就是我遇到麻烦的地方。我希望 name 变量成为条件语句的选定结果。所以当按钮被按下时，它会显示
标题元素。

标签： javascript reactjs components

【解决方案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"));

【讨论】：

舒巴姆！我让它工作了！我对绑定进行了一些研究，对状态进行了更多研究，最终得到了它！谢谢。

【解决方案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"));

在创建构造函数、绑定我的显示方法并设置我的 name 变量的状态之后，我能够弄清楚！

【讨论】：

标题元素。