时间戳

首页 > 解决方案 > 如何在 React 中调用可重用组件中的函数

reactjs - 如何在 React 中调用可重用组件中的函数

问题描述

嗨，我正在我的项目中处理一个 React 项目，一个按钮来了很多次。因此，我为 Button 创建了一个组件，并在获得按钮的地方重用该组件。现在的问题是，当我尝试将 onClick 函数应用于该 Button 组件时，我的函数不起作用，所以请帮我解决这个问题。

这是按钮组件 Button.js

import React from "react";
import "./Button.css";

const Button = () => {
  return (
    <div>
      <button className="btn btn-primary">Show login button</button>
    </div>
  );
};

export default Button;

这是Button.css，我什么都没写

这是 App.js

import React, { useState } from "react";
import Button from "./Button/Button";
import "./App.css";

const App = () => {
  const [hideForm, setHideForm] = useState(false);

  const showLoginForm = () => {
    setHideForm(true);
  };
  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-4">
          {hideForm ? (
            <div className="loginform">
              <form>
                <div className="form-group">
                  <label htmlFor="email">Email</label>
                  <input
                    type="email"
                    className="form-control"
                    id="email"
                    placeholder="Enter email"
                  ></input>
                </div>
                <div className="form-group">
                  <label htmlFor="password">Password</label>
                  <input
                    type="password"
                    className="form-control"
                    id="password"
                    placeholder="Enter password"
                  ></input>
                </div>
                <button type="submit" className="btn btn-primary mt-3">
                  Submit
                </button>
              </form>
            </div>
          ) : (
            <div className="signupform">
              <form>
                <div className="form-group">
                  <label htmlFor="firstname">Firstname</label>
                  <input
                    type="text"
                    className="form-control"
                    id="firstname"
                    placeholder="Enter firstname"
                  ></input>
                </div>
                <div className="form-group">
                  <label htmlFor="lastname">Lastname</label>
                  <input
                    type="text"
                    className="form-control"
                    id="lastname"
                    placeholder="Enter lastname"
                  ></input>
                </div>
                <div className="form-group">
                  <label htmlFor="email">Email</label>
                  <input
                    type="email"
                    className="form-control"
                    id="email"
                    placeholder="Enter email"
                  ></input>
                </div>
                <div className="form-group">
                  <label htmlFor="password">Password</label>
                  <input
                    type="password"
                    className="form-control"
                    id="password"
                    placeholder="Enter password"
                  ></input>
                </div>
                <button type="submit" className="btn btn-primary mt-3">
                  Submit
                </button>
              </form>
            </div>
          )}
          <div className="buttons mt-3">
            <Button onClick={() => showLoginForm()}></Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

标签： reactjs

解决方案

const Button = ({handleClick}) => {
    return (
        <div>
            <button onClick={handleClick} className='btn btn-primary'>Show login button</button>
        </div>
    )
}

像这样使用它：

<Button handleClick={()=>anyFunc()}/>
or
<Button handleclick={anyFunc}/>
``

推荐阅读