Button组件的onclick与事件属性

Question

我是非常新的反应和前端的发展。

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

为什么下面的代码片段能够正常工作：

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代码:从“React”导入react；

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

区别似乎在于onClick与事件属性之间的区别。在事件版本中，单击web浏览器中实例化的初始按钮将不断添加新的按钮实例。对于onClick，什么都不会发生。

Answer 1

道具'onCLick‘不存在于Button组件中，这就是它不能工作的原因。更改您的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中使用Button而不是事件。然后在应用程序组件中

  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>
  );
}