在ReactJS中单击按钮时添加和删除输入组件

import React, { useState } from 'react';

const InputComponent = ({ onRemove }) => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={onRemove}>删除</button>
    </div>
  );
};

export default InputComponent;

import React, { useState } from 'react';
import InputComponent from './InputComponent';

const ParentComponent = () => {
  const [inputComponents, setInputComponents] = useState([]);

  const handleAddInputComponent = () => {
    setInputComponents([...inputComponents, <InputComponent key={inputComponents.length} onRemove={() => handleRemoveInputComponent(inputComponents.length)} />]);
  };

  const handleRemoveInputComponent = (index) => {
    setInputComponents(inputComponents.filter((_, i) => i !== index));
  };

  return (
    <div>
      {inputComponents}
      <button onClick={handleAddInputComponent}>添加输入组件</button>
    </div>
  );
};

export default ParentComponent;