onclick与Button组件的事件属性

Question

我对React和前端开发非常陌生。

我最近遇到了一些让我困惑的事情。

为什么以下代码片段可以正常工作：

import React, { useState } from "react";
import "./styles.css";
import Button from "./Button";
export default function App() {
const [buttonsOnCanvas, setButtonsOnCanvas] = useState([]);
return (
<div className="App">
<Button
event={() => {
setButtonsOnCanvas([...buttonsOnCanvas, <Button />]);
}}
/>
<div className="canvas">{buttonsOnCanvas}</div>
</div>
);
}

但不是这个：

import React, { useState } from "react";
import "./styles.css";
import Button from "./Button";
export default function App() {
const [buttonsOnCanvas, setButtonsOnCanvas] = useState([]);
function handleAddButtonClick() {
setButtonsOnCanvas([...buttonsOnCanvas, <Button />]);
}
return (
<div className="App">
<Button
onClick={() => handleAddButtonClick()}
/>
<div className="canvas">{buttonsOnCanvas}</div>
</div>
);
}

Button.js的代码：import React from"；反应"；；

export default ({ name = "Add Button", event }) => (
<button onClick={event}>{name}</button>
);

区别似乎在于onClick与事件属性。在事件版本中，单击web浏览器中实例化的初始按钮将不断添加新的按钮实例。使用onClick，不会发生任何事情。

Answer 1

Button组件中不存在道具"onCLick"，这就是它不起作用的原因。更改Button.js

export default ({ name = "Add Button", event }) => (
<button onClick={event}>{name}</button>
);

通过

export default ({ name = "Add Button", onClick }) => ( 
<button onClick={onClick}>{name}</button>
);

现在，您可以将按钮与onClick一起使用，而不是使用事件。然后在您的应用程序组件中

export default function App() {
const [buttonsOnCanvas, setButtonsOnCanvas] = useState([]);
function handleAddButtonClick() {
setButtonsOnCanvas([...buttonsOnCanvas, <Button />]);
}
return (
<div className="App">
<Button
onClick={handleAddButtonClick} // Better avoid anonymous function
/>
<div className="canvas">{buttonsOnCanvas}</div>
</div>
);
}