在 ReactJs 中使用按钮添加新输入字段

Question

我正在做一个项目，所以我尝试在使用 react-Hooks 单击表单中的添加 (+) 按钮后添加一个新的输入字段。如果有人能弄清楚这一点，那将非常有帮助，这样我就可以学到新东西。提前谢谢你。[添加了 React 事件处理 link][1] 这是表格的代码和css文件

import Navbar from "./Navbar/Navbar";
import "./UserDetails.css";

function UserDetails() {
  const [Info, setInfo] = useState({
    username: "",
    email: "",
    bio: "",
    positions: "",
  });
  const { username, email, bio, positions } = Info;
  const onChange = (e) => setInfo({ ...Info, [e.target.name]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();

    console.log(Info);
  };

  return (
    <div>
      <Navbar />
      <div className="full">
        <h1 className="top">Edit Profile</h1>
        <img
          className="pic"
          src="https://www.pngitem.com/pimgs/m/146-1468479_my-profile-icon-blank-profile-picture-circle-hd.png"
          alt=""
        ></img>
        <div className="inputs">
          <form className="frms" onSubmit={(e) => onSubmit(e)}>
            <input
              className="insides"
              type="text"
              placeholder="Username"
              name="username"
              value={username}
              onChange={(e) => onChange(e)}
            ></input>
            <input
              className="insides"
              type="email"
              placeholder="email"
              name="email"
              value={email}
              onChange={(e) => onChange(e)}
            ></input>

            <textarea
              placeholder="Add Bio here..."
              name="bio"
              value={bio}
              onChange={(e) => onChange(e)}
            ></textarea>
          </form>
        </div>
        <div className="addbtn">
          <input
            className="insidesp"
            type="text"
            placeholder="positions held..."
            name="positions"
            value={positions}
            onChange={(e) => onChange(e)}
          ></input>
          <button>+</button>
          <br></br>
          <button className="savebtn">Save Changes</button>
        </div>
      </div>
    </div>
  );
}
export default UserDetails; 
 

     

.full {
  text-align: center;
  border: 2px solid white;
  margin: 0 auto;
  padding-top: 1%;
  width: 50%;
  padding-bottom: 1%;
  margin-top: 2%;
  border-radius: 30px;
  box-shadow: 5px 6px 5px 6px rgb(158, 170, 238);
}
.top {
  color: rgb(88 99 161);
}
.pic {
  height: 40%;
  width: 30%;
}
.inputs input {
  display: block;
  width: 70%;
  margin: 0 auto;
  margin-top: 2%;
  border: 2px solid rgb(88 99 161);
  border-radius: 7px;
}
.inputs textarea {
  display: block;
  width: 70%;
  margin: 0 auto;
  margin-top: 2%;
  border: 2px solid rgb(88 99 161);
  border-radius: 7px;
}
.pic {
  margin: 2%;
}
.savebtn {
  margin-top: 2%;
  background-color: rgb(88 99 161);
  border: 2px solid rgb(158, 170, 238);
  border-radius: 6px;
}
.addbtn {
  display: inline;
}
.addbtn input {
  margin-right: 1%;
  width: 65%;
  margin-top: 2%;
  border: 2px solid rgb(88 99 161);
  border-radius: 7px;
}
.addbtn button {
  background-color: rgb(88 99 161);
  border-radius: 6px;
  border: 2px solid rgb(158, 170, 238);
}```



    


   


  [1]: https://reactjs.org/docs/handling-events.html

Answer 1

这是一篇很棒的文章，它逐步解释了您问题的解决方案： https://www.cluemediator.com/add-or-remove-input-fields-dynamically-with-reactjs

在 ReactJs 中使用按钮添加新输入字段

Adding New Input Field using button in ReactJs

reactjs

react-hooks

event-handling