动态添加/删除多个输入字段后不清除输入(文本)字段值

// 动态添加输入字段
function addInputField() {
    const container = document.getElementById('input-container');
    const newInput = document.createElement('input');
    newInput.type = 'text';
    container.appendChild(newInput);
}

// 动态删除输入字段
function removeInputField() {
    const container = document.getElementById('input-container');
    if (container.children.length > 0) {
        container.removeChild(container.lastElementChild);
    }
}

// 清除所有输入字段的值
function clearInputFields() {
    const inputs = document.querySelectorAll('#input-container input');
    inputs.forEach(input => input.value = '');
}

import React, { useState } from 'react';

function DynamicForm() {
    const [inputs, setInputs] = useState([]);

    const addInputField = () => {
        setInputs([...inputs, '']);
    };

    const removeInputField = () => {
        if (inputs.length > 0) {
            setInputs(inputs.slice(0, inputs.length - 1));
        }
    };

    const clearInputFields = () => {
        setInputs(inputs.map(() => ''));
    };

    return (
        <div>
            <div id="input-container">
                {inputs.map((input, index) => (
                    <input key={index} type="text" value={input} onChange={(e) => {
                        const newInputs = [...inputs];
                        newInputs[index] = e.target.value;
                        setInputs(newInputs);
                    }} />
                ))}
            </div>
            <button onClick={addInputField}>Add Field</button>
            <button onClick={removeInputField}>Remove Field</button>
            <button onClick={clearInputFields}>Clear Fields</button>
        </div>
    );
}

export default DynamicForm;