javascript - 在 React 的事件处理程序 onClick() 的箭头函数中将 prop 值作为参数传递

Question

我试图在 onClick() 上调用的函数中传递 prop 的值，但是当我尝试在函数中使用 console.log() 时出现以下错误。

错误:

**Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use 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 一起传回在父点击事件处理程序中，您可以在那里访问。