时间戳

首页 > 解决方案 > 按按钮复制组件

javascript - 按按钮复制组件

问题描述

我想通过单击一个按钮来创建组件。有用。但是生成的组件是自上而下的。我希望他们从左到右。

import { Card, Button } from "antd";
import "./Card.css";
import { useState } from "react";
import Todo from "./Todo";

const CreateCard = () => {
    const [todo, setTodo] = useState([]);
    const addTodo = (event) => {
        setTodo(todo.concat(<Todo key={todo.length} />));
    }
    return (
        <div>
            <Card hoverable className="card" title="New Project" style={{ width: 300, height: 200 }}>
                <Button onClick={addTodo}>CREATE</Button>
            </Card>
            {todo}
        </div>
    )
}
export default CreateCard;

这是带有按钮的卡片的代码。

import { Card } from "antd";
import "./Card.css";
const Todo = () => {
    return (
        <Card hoverable className="card" title="New Project" style={{ width: 300, height: 200 }}>
            <p>Merhaba</p>
        </Card>
    )
}
export default Todo;

这是 Todo 组件。当我编写标签而不是卡片组件时，它可以按我的意愿工作。但我想从左到右生成一张卡片。我怎样才能做到这一点？

标签： javascriptreactjs

解决方案

使用弹性行

import { Card, Button } from "antd";
import "./Card.css";
import { useState } from "react";
import Todo from "./Todo";

const CreateCard = () => {
    const [todo, setTodo] = useState([]);
    const addTodo = (event) => {
        setTodo(todo.concat(<Todo key={todo.length} />));
    }
    return (
        <div>
            <Card hoverable className="card" title="New Project" style={{ width: 300, height: 200 }}>
                <Button onClick={addTodo}>CREATE</Button>
            </Card>

            <div style={{display: "flex", flexDirection: "row"}}>{todo}</div>
        </div>
    )
}
export default CreateCard;

推荐阅读