Question

我正在尝试在onClick（）上调用的函数中传递prop的值，但是当我尝试在函数内部console.log（）该值时遇到以下错误。

错误：

**警告：出于性能原因，此合成事件被重用。如果看到此消息，则说明您正在访问广告资源nativeEvent 已发布/无效的合成事件。设置为空。如果你必须要保留原始的合成事件，请使用event.persist（）。

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.evaluateInfixString = this.evaluateInfixString.bind(this);
    this.appendInfixString = this.appendInfixString.bind(this);
    this.state = {
      buttons: ["+", "-", "*", "/", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "clear", "="],
      infixString: null
    };
  }
  evaluateInfixString() {
    console.log("perform operation");
  }
  appendInfixString(buttonPressed) {
    console.log(buttonPressed);
  }
  render() {
    return (
      <div id={"calculator"}>
        <Display value={this.state.infixString} />
        <Buttons
          buttons={this.state.buttons}
          appendInfixString={this.appendInfixString}
        />
      </div>
    );
  }
}

class Display extends React.Component {
  render() {
    return <div id={"display"}>{this.props.value}</div>;
  }
}

class Buttons extends React.Component {
  render() {
    return (
      <div id={"buttons"}>
        {this.props.buttons.map(button => {
          return <button className={"button"} onClick={(button) => this.props.appendInfixString(button)}>{button}</button>;
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Calculator />, rootElement);

Answer 1

更改：

return <button className={"button"} onClick={(button) =>  this.props.appendInfixString(button)}>{button}</button>;

收件人：

    return <button className={"button"} onClick={() => this.props.appendInfixString(button)}>{button}</button>;

这是工作中的codepen。如果您打开控制台，您会看到数字或字符已为您登录到控制台。

完成您想要做的事情的另一种方法是类似于我在此codepen中所做的事情。您将把事件传递回父级，然后可以像我在父级组件中显示的那样使用e.target.value访问该值。在这种情况下，您的子组件将具有这样的点击处理程序：

<button type="button" className={"button"} value={button} onClick={this.props.appendInfixString}>{button}</button>

button值将与父级单击事件处理程序中的event一起传递回去，您可以在其中访问它。

Answer 2

传递给onClick的是点击事件，因此在下面的代码中

<button className={"button"} onClick={(button) =>this.props.appendInfixString(button)}>{button}</button>

您传递给appendInfixString的不是用户单击的按钮字符串，而是单击事件。如果您需要传递被点击的按钮字符串，请尝试

<button className={"button"} onClick={() => this.props.appendInfixString(button)}>{button}</button>

在React的事件处理程序onClick（）中，将prop值作为参数传递给箭头函数

2 个答案: