使用React动态添加和删除输入元素

React是一个用于构建用户界面的JavaScript库。它通过组件化的方式，使得开发者可以轻松地构建可复用的UI组件。在React中，动态添加和删除输入元素可以通过以下步骤实现：

创建一个React组件，用于渲染输入元素和处理添加/删除操作。
在组件的状态中，定义一个数组来存储输入元素的值。例如，可以使用useState钩子来创建一个名为inputValues的状态变量。
在组件的渲染方法中，使用map函数遍历inputValues数组，并为每个元素渲染一个输入框。可以为每个输入框设置一个唯一的key属性，以便React能够正确地识别和更新它们。
添加一个按钮或其他交互元素，用于触发添加新的输入元素的操作。当用户点击该按钮时，可以通过setState或useState的更新函数来添加一个新的空字符串到inputValues数组中。
为每个输入框添加一个删除按钮或其他交互元素，用于触发删除对应输入元素的操作。当用户点击删除按钮时，可以通过setState或useState的更新函数来从inputValues数组中移除对应的元素。

下面是一个示例代码：

import React, { useState } from 'react';

function DynamicInput() {
  const [inputValues, setInputValues] = useState(['']);

  const handleAddInput = () => {
    setInputValues([...inputValues, '']);
  };

  const handleRemoveInput = (index) => {
    const newInputValues = [...inputValues];
    newInputValues.splice(index, 1);
    setInputValues(newInputValues);
  };

  const handleChangeInput = (index, value) => {
    const newInputValues = [...inputValues];
    newInputValues[index] = value;
    setInputValues(newInputValues);
  };

  return (
    <div>
      {inputValues.map((value, index) => (
        <div key={index}>
          <input
            type="text"
            value={value}
            onChange={(e) => handleChangeInput(index, e.target.value)}
          />
          <button onClick={() => handleRemoveInput(index)}>删除</button>
        </div>
      ))}
      <button onClick={handleAddInput}>添加</button>
    </div>
  );
}

export default DynamicInput;

在这个示例中，我们使用useState钩子来创建inputValues状态变量，并通过setInputValues函数来更新它。handleAddInput函数用于添加新的输入元素，handleRemoveInput函数用于删除对应的输入元素，handleChangeInput函数用于更新输入元素的值。

这个示例中使用了React的基本概念和语法，适用于React开发中动态添加和删除输入元素的场景。如果你想了解更多React的相关知识和技术，可以参考腾讯云的React产品介绍页面：React产品介绍。