如何從 React 的表單中獲取 append 數據？

Question

我在這里有兩個輸入字段，我想通過單擊提交來創建新卡 object。 我已經在開發工具中顯示了 object，但我無法將輸入字段中的這些數據顯示為新卡。 我懷疑它與 formdata、append 和 state 管理有關。 有誰知道這是如何工作的？

我的 App.js：

import "./App.css";
import Card from "./components/Card";
import Header from "./components/Header";
import CardComponents from "./components/CardComponents";
import CreateForm from "./components/Form";

export default function App() {
  const colorCard = [
    {
      name: "Card1",
      id: "234",
      colorCode: "#ccc",
    },
    {
      name: "Card2",
      id: "2",
      colorCode: "#4c6ef5",
    },
    {
      name: "Card3",
      id: "3",
      colorCode: "#82c91e",
    },
    {
      name: "Card4",
      id: "4",
      colorCode: "#12b886",
    },
    {
      name: "Card5",
      id: "5",
      colorCode: "#00FFFF",
    },
    {
      name: "Card6",
      id: "7",
      colorCode: "#9FE2BF",
    },
    {
      name: "Card8",
      id: "5",
      colorCode: "#DE3163",
    },
    {
      name: "Card9",
      id: "5",
      colorCode: "#50C878",
    },
    {
      name: "Card10",
      id: "5",
      colorCode: "#40E0D0",
    },
  ];
  return (
    <main>
      <Header />
      <CreateForm />
      <ul>
        {colorCard.map((card) => (
          <CardComponents
            key={card.id}
            color={card.colorCode}
            name={card.name}
          />
        ))}
      </ul>
    </main>
  );
}

Form.js 組件：

import { useState } from "react";

const CreateForm = () => {
  const [value, setValue] = useState("");
  const [code, setCode] = useState("");

  const submitHandler = (event) => {
    event.preventDefault();
    const newColorBox = { value, code };

    console.log(newColorBox);
  };
  return (
    <form onSubmit={submitHandler}>
      <h2>Add Card</h2>
      <input
        type="text"
        required
        placeholder="Name your Card"
        value={value}
        onChange={(event) => setValue(event.target.value)}
      ></input>
      <br></br>
      <input
        type="text"
        placeholder="Name your Color Code"
        required
        value={code}
        onChange={(event) => setCode(event.target.value)}
      ></input>
      <br></br>
      <button type="submit">Submit your Card</button>
      <p> CardName: {value}</p>
      <p>ColorCode: {code}</p>
    </form>
  );
};

export default CreateForm;

Answer 1

1 添加：

  const [cards,setCards]=useState(/*you car insert your initial data in app.js*/)

2. 將setCards()傳遞給 form.js 並在 submitHandler 中調用它。