Question

当您单击按钮时，我正在尝试生成新表单。我想用钩子做到这一点。我正在竭尽全力地做我需要做的事情，下面是一个示例函数和按钮。任何帮助表示赞赏。

const addStudent = () => {
    console.log("clicked")
    
    return(
        
        <Container>
            <Form form="First Name" type="text" placeholder="First Name"/>
            <Form form="Last Name" type="text" placeholder="Last Name"/>
            <Form form="Date of Birth" type="date"/>
            <Form form="School ID" type="text"/>
            <Form form="Campus" type="text"/>
            <Form form="School Grade" type="text"/>
        </Container>
        

    )
        
    
    console.log(setStudent)
}

              <button onClick={addStudent}>Add Another Student</button>

Answer 1

您可以做这样的事情

https://codesandbox.io/s/silly-nash-0slhh?file=/src/App.js:97-1145

App.js

import Input from "./Input";
export default function App() {
  const [students, setStudents] = useState([]);
  const addStudent = () => {
    setStudents(students => [...students, <Input />]);
    console.log("dddd", students);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={addStudent}>Add Another Student</button>
      {students.map((item, i) => (
        <div key={i}>{item}</div>
      ))}
    </div>
  );
}

Input.js

import React, { useState } from "react";

export default function Input() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastname] = useState("");
  const [Dob, setDob] = useState("");
  return (
    <div style={{ width: "200px", height: "100px", padding: "5px" }}>
      <input
        type="text"
        value={firstName}
        onChange={e => setFirstName(e.target.value)}
        placeholder="First Name"
      />
      <input
        type="text"
        value={lastName}
        onChange={e => setLastname(e.target.value)}
        placeholder="Last Name"
      />
      <input
        type="text"
        value={Dob}
        onChange={e => setDob(e.target.value)}
        placeholder="DOB"
      />
    </div>
  );
}

Answer 2

我创建了一个名为学生的变量，并使用Context来捕获状态值。然后，我通过学生进行映射，然后为addStudent函数使用了传播运算符并在下面设置了setStudents。

const [students, setStudents] = useContext(FormDataContext);

*this is in the return()*

{students.map((student, index) => (
            <FormCard
              key={index}
              index={index}
              handleChange={handleChange}
              student={students[index]}
              metadata={metadata}
            />
          ))}

*then called this function in my button onClick*

const addStudent = () => {
    setStudents([...students, {}]);
  };

使用React Hooks onClick渲染新组件

2 个答案: