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

Question

我正在尝试在 onClick(( 上调用的函数中传递 prop 的值，但是当我尝试在函数内控制台.log(( 该值时，我收到以下错误。

错误：

**警告：出于性能原因，将重用此综合事件。如果您看到此消息，则表示您正在访问该属性nativeEvent已发布/已作废的合成事件。这设置为 null。如果你必须 保留原始合成事件，使用 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>;

这是一个有效的代码笔。 如果打开主机，您将看到数字或字符已记录到控制台中。

完成你想做的事情的另一种方法是像我在这个代码笔中所做的那样。 您将事件传递回父级，然后您可以使用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>