reactjs动态添加表单输入答案

【问题标题】：reactjs dynamically adding a form inputreactjs动态添加表单输入
【发布时间】：2020-09-08 19:16:23
【问题描述】：

我正在处理一个响应表单，我想要的是当我单击一个按钮时，我添加一个新组件，它只是屏幕的一个输入。这一切都按计划进行。问题在于：布局是我有一个主要组件，然后显示一个子组件。该子组件是从 useState 的映射中调用的。（代码sn-p后更多）

这是主要组件的代码：

import React, { useState } from "react";
import SingleProfile from "./individual_profile";

const ProfileInformation = (props) => {
console.log("proflie render");
  const [ProfilesBoolean, setProfilesBoolean] = useState(false);
  const [profiles, setProfiles] = useState(props.Data['profiles'])

  const FieldAdd = (event)=>{
       event.preventDefault();
      const copy = profiles;
      copy.push({Network:'',url:''})
      return(copy)
  }

  function CreateInput(){
      return profiles.map((data, index) =><SingleProfile index={index} data={data} />)
  }

  const accordion = (event) => {
    const NextElement = event.target.nextElementSibling;
    if (!event.target.className.includes("display")) {
      NextElement.style.maxHeight = NextElement.scrollHeight + "px";
    } else {
      NextElement.style.maxHeight = 0;
    }
  };
  return (
    <div className="AccordionItem">
      <div
        className={
          ProfilesBoolean ? "AccordionHeader-display" : "AccordionHeader"
        }
        onClick={(e) => setProfilesBoolean(!ProfilesBoolean)}
        id="ProfileForm"
      >
        Profiles
      </div>

      <div className="AccordionContent">
        <div className="AccordionBody">
          {
           profiles.map((data, index) => (
             <SingleProfile index={index} data={data} />
           ))
          }
          <button id="ProfileAdd" onClick={(e) => {setProfiles(FieldAdd(e))}}>
            Add a profile
          </button>
        </div>
      </div>
    </div>
  );
};
export default ProfileInformation;

当我单击按钮并 onClick 触发 FieldAdd() 时，useState 会更新，并按预期使用新的空对象。但是，它并没有像我期望的那样出现在我的<div className="AccordionBody"> 中。

以下代码用于显示组件，通过打开和关闭子 div。当它打开时，您会看到子组件和添加按钮。如果我单击 div 关闭然后再次单击以重新打开它，则会出现新的子组件。

<div
  className={ProfilesBoolean ? "AccordionHeader-display" : "AccordionHeader"}
  onClick={(e) => setProfilesBoolean(!ProfilesBoolean)}
  id="ProfileForm"
>
  Profiles
</div>;

是否可以让子组件出现而无需关闭并重新打开div？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的 clickHandler FieldAdd 不正确。您正在直接改变状态，这不会导致重新渲染。

使用setProfiles 更新clickHandler 中的状态。像这样

const FieldAdd = (event)=>{
      setProfiles(prev => [...prev, {Network:'',url:''}])
  }

像这样触发onClick

<button id="ProfileAdd" onClick={(e) => {FieldAdd(e)}}>
            Add a profile
          </button>
...

【讨论】：

我想知道你是否可以提供一些背景信息，关于你的修复是如何工作的。