React JS中点击按钮添加/移除Div及根据ID添加Div的实现方法求助

我来帮你搞定这两个React功能，下面是基于函数组件+Hooks的实现方案，代码清晰易扩展，完全贴合你的需求：

第一步：封装可复用的Section组件 #

先把你提供的Div结构封装成一个可复用组件，这样不管是添加哪个ID的区块，都能直接调用，还能避免重复代码：

const SectionComponent = ({ id, onChange }) => {
  // 根据ID生成标题（比如section1 -> Section1）
  const sectionTitle = id.charAt(0).toUpperCase() + id.slice(1);

  return (
    <div id={id}>
      <table>
        <tr>
          <td><h3>{sectionTitle}</h3></td>
        </tr>
        <tr>
          <td>
            {/* 给input的name加上ID前缀，避免多个区块的input名称冲突 */}
            <li><label> input1 : </label><input type="text" size="100" name={`${id}_input1`} onChange={onChange} /></li>
            <li><label> input2 : </label><input type="text" size="100" name={`${id}_input2`} onChange={onChange} /></li>
            <li><label> input3 : </label><input type="text" size="100" name={`${id}_input3`} onChange={onChange}/></li>
          </td>
        </tr>
      </table>
    </div>
  );
};

第二步：主组件实现动态控制逻辑 #

接下来在主组件里通过状态管理来控制区块的添加、移除，以及按ID添加的功能：

import { useState } from 'react';

function App() {
  // 用数组维护当前显示的所有区块ID，支持同时显示多个不同ID的区块
  const [visibleSections, setVisibleSections] = useState([]);

  // 处理输入框变化的函数，你可以根据需求扩展逻辑（比如保存输入值）
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    console.log(`输入框 ${name} 的值变为：${value}`);
    // 如果需要保存输入值，可以在这里更新对应的状态
    // 示例：setFormValues(prev => ({ ...prev, [name]: value }))
  };

  // 功能1：点击按钮切换指定区块的显示/隐藏（存在则移除，不存在则添加）
  const toggleSection = (sectionId) => {
    setVisibleSections(prevSections => {
      if (prevSections.includes(sectionId)) {
        // 如果已存在，过滤掉这个ID
        return prevSections.filter(id => id !== sectionId);
      } else {
        // 如果不存在，添加这个ID到数组
        return [...prevSections, sectionId];
      }
    });
  };

  // 功能2：根据ID添加区块（仅当区块不存在时添加，避免重复）
  const addSectionById = (sectionId) => {
    setVisibleSections(prevSections => {
      if (!prevSections.includes(sectionId)) {
        return [...prevSections, sectionId];
      }
      // 已存在则不做任何操作
      return prevSections;
    });
  };

  return (
    <div className="App">
      {/* 切换Section1的按钮：根据当前状态显示不同文字 */}
      <button onClick={() => toggleSection('section1')}>
        {visibleSections.includes('section1') ? '移除Section1' : '添加Section1'}
      </button>

      {/* 按ID添加其他区块的按钮示例 */}
      <button onClick={() => addSectionById('section2')}>添加Section2</button>
      <button onClick={() => addSectionById('section3')}>添加Section3</button>

      {/* 渲染所有可见的区块 */}
      {visibleSections.map(sectionId => (
        <SectionComponent key={sectionId} id={sectionId} onChange={handleInputChange} />
      ))}
    </div>
  );
}

export default App;

关键逻辑说明 #

1. 状态管理：visibleSections数组用来记录当前需要渲染的区块ID，通过更新这个数组就能控制哪些区块显示在页面上。
2. 切换功能：toggleSection函数会判断指定ID是否在数组中，从而决定是添加还是移除该区块，实现点击按钮切换显示状态的效果。
3. 按ID添加：addSectionById函数只会在区块不存在时添加，避免重复创建相同ID的Div。
4. 输入值管理：如果需要保存每个输入框的值，可以额外维护一个formValues状态对象，在handleInputChange里更新对应字段即可。

如果只需要针对单个区块（比如仅Section1）的添加/移除，也可以简化状态为布尔值：

const [isSection1Visible, setIsSection1Visible] = useState(false);
// 按钮点击时：setIsSection1Visible(prev => !prev)
// 渲染时：{isSection1Visible && <SectionComponent id="section1" onChange={handleInputChange} />}

内容的提问来源于stack exchange，提问作者user3274140