React 在父组件内的按钮的 onClick 内运行函数

Question

我有两个组件，一个子组件和一个父组件，所以子组件是一个 div，里面有一个按钮，在父组件里面我用 onclick 属性调用它，里面有函数，这可能吗？

Button.js

import React from "react";

const Button =() => {
  return(
    <div>
      <button> >Hello world</button>
    </div>
  )
}
export default Button;

App.js

import React from "react";
import ReactDOM from "react-dom";
import Button from "./button";
import "./styles.css";

const  handleClick = () => {
  return(<h1>Hello world..!</h1>)

}

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={handleClick()} />
    </div>
  );
}

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

Answer 1

让我们创建一个好的按钮组件，以便在多个页面中使用按钮组件。使用下一个代码为按钮组件创建自己的文件：

import React from "react";

const Button = ({ onClick, title }) => (
  <div>
    <button onClick={onClick}>{title}</button>
  </div>
)

export default Button;

按钮组件有两个道具。它是onClick 和title。 onClick - 这是一个函数。 title - 它是一个字符串。我们可以使用PropTypes 来检查类型，但现在不行，在这个例子中它不是很重要。

所以，如果你想在多个页面中使用按钮组件，那么只需导入你的按钮组件并将两个道具传递给组件，就像下面的代码一样：

<Button
  onClick={handleClick}
  title=">Hello world"
/>

它非常简单易用。在下一个 sn-p 中包含您的代码的完整示例：

const Button = ({ onClick, title }) => (
  <div>
    <button onClick={onClick}>{title}</button>
  </div>
)

const handleClick = () => {
  console.log('clicked');
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button onClick={handleClick} title=">Hello world" />
    </div>
  );
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 2

错误是 handleClick() 是一个函数处理程序，所以不要在其中返回 JSX 模板，
这是一个工作示例

   // Button.js

    // import React from "react";

    const Button = props => (
        <div>
          <button onClick={props.click}>Hello world</button>
        </div>
      )
    // export default Button;

    // App.js

    // import React from "react";
    // import ReactDOM from "react-dom";
    // import Button from "./button";
    // import "./styles.css";

    const  handleClick = () => {
      alert("Hello world")
      // return(<h1>Hello world..!</h1>)
    }

    function App() {
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <Button click={() => handleClick()} />
        </div>
      );
    }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 3

您为<Button /> 组件设置的onClick 属性永远不会到达<button> 元素。您必须将 onClick 道具添加到 Button 组件道具：

import React from "react";
import PropTypes from 'prop-types';

const Button = ({ onClick }) => {
  return(
    <div>
      <button onClick={onClick}>Hello world</button>
    </div>
  )
}

Button.defaultProps = {
  onClick: () => null,
};
Button.propTypes = {
  onClick: PropTypes.func,
};
export default Button;

还要注意，在这种情况下，您应该在父组件中传递不带括号的函数<Button onClick={handleClick} />。请记住，对于不同的用例，有不同的方法可以做到这一点。