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来检查类型，但是现在不能，在这个例子中，它不是很重要。

因此，如果要在多个页面中使用按钮组件，则只需导入按钮组件，然后将两个prop传递给该组件，就像下一个代码一样：

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

它非常简单且可用。在下一个代码段中包含您的代码的完整示例：

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

您为onClick组件设置的<Button />道具将永远不会到达<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} />中应在父组件中传递不带括号的函数。请记住，针对不同的用例，有不同的方法可以做到这一点。

Answer 3

错误是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" />

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

3 个答案: