时间戳

首页 > 解决方案 > 当我使用 Hooks 在 React 中单击 h3 标签时如何循环组件

reactjs - 当我使用 Hooks 在 React 中单击 h3 标签时如何循环组件

问题描述

根据我的问题，我有一个父组件，它的名称是 App.js，子组件的名称是 Cardone.js。在 Cardone.js 组件中，有一张 Card。我将此卡组件作为子组件传递给父组件。现在在父组件中我有 h3 标签添加一个。我想要实现的是我最多需要循环一个组件五次。只有当我单击 h3 标签时它才应该开始循环

这是 App.js

import React, { useState } from "react";
import 'antd/dist/antd.css';
import Card from "./Cardone/Cardone"
import { Row, Col } from "antd";
import "./App.css"

const App = () => {
  const [comp, loopComp] = useState(<Card></Card>)

  const loopComponent = () => {
    loopComp(comp + 1)
  }
  return (
    <div>
      <Card></Card>
      <div style={{display: "flex", justifyContent: "center", marginTop: "10px", cursor: "pointer"}}>
        <Row>
          <Col span={24}>
            <h3 onClick={loopComponent}>Add One More</h3>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default App

这是 Cardone.js

import React from "react";
import 'antd/dist/antd.css';
import { Card, Form, Input, Button } from 'antd';
import "./Cardone.css";

const Cardone = () => {
  // const { Option } = Select;
  return (
    <div className="site-card-border-less-wrapper">
      <div style={{display: "flex", justifyContent: "center", marginTop: "10px"}}>
        <Card style={{ width: 900 }}>
          <h3>Card One</h3>
          <Form layout="inline">
            <Form.Item style={{marginTop: "5px"}}
              name="firstname"
              className="firstname"
              rules={[
                {
                  required: true,
                  message: 'Please enter firstname',
                },
              ]}
            >
              <Input name="firstname" type="text" placeholder="Enter Firstname" className="firstname" style={{ width: 300 }} />
            </Form.Item>
          </Form>
          <Form layout="inline">
            <Form.Item style={{marginTop: "5px"}}
              name="lastname"
              className="lastname"
              rules={[
                {
                  required: true,
                  message: 'Please enter lasttname',
                },
              ]}
            >
              <Input name="lasttname" type="text" placeholder="Enter Lastname" className="lastname" style={{ width: 300 }} />
            </Form.Item>
          </Form>

          <Form layout="inline">
            <Form.Item style={{marginTop: "5px"}}
              name="email"
              className="email"
              rules={[
                {
                  required: true,
                  message: 'Please enter email',
                },
              ]}
            >
              <Input name="email" type="email" placeholder="Enter Email" className="email" style={{ width: 300 }} />
            </Form.Item>
          </Form>

          <Form layout="inline">
            <Form.Item style={{marginTop: "5px"}}
              name="password"
              className="password"
              rules={[
                {
                  required: true,
                  message: 'Please enter password',
                },
              ]}
            >
              <Input name="password" type="password" placeholder="Enter Password" className="password" style={{ width: 300 }} />
            </Form.Item>
          </Form>
          <Button style={{marginTop: "10px"}} type="primary">Submit</Button>
        </Card>,
      </div>
    </div>
  )
}

export default Cardone

标签： reactjs

解决方案

您应该像这样更改 App.js：

import React, { useState } from "react";
import 'antd/dist/antd.css';
import Card from "./Cardone/Cardone"
import { Row, Col } from "antd";
import "./App.css"

const App = () => {
  const [comp, loopComp] = useState([<Card />])

  /*** change here***/
  const loopComponent = () => {
  if(comp.length<5){
    comp.push(<Card />);
    const newComp = [...comp];
    loopComp(newComp);
     }
  };
/******/

  return (
    <div>
       /*** and change here too***/
       {comp.map((m) => m)}
       /******/

      <div style={{display: "flex", justifyContent: "center", marginTop: "10px", cursor: "pointer"}}>
        <Row>
          <Col span={24}>
            <h3 onClick={loopComponent}>Add One More</h3>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default App

推荐阅读