Reactjs 映射函数使用event.target.name，并将多个值标记为映射的索引

下面的功能只能运行一个组件（即“ComponentTwo”），我想对其进行修改，使其具有更多组件，但问题是，由于我使用map函数循环通过组件映射“值”，相同的值将传递给所有组件。 在代码中，有两个函数用于处理当前的更改，我使用的是“handleInputChange”，它以值作为输入，但我希望它与名称一起工作，以便我可以使用名称来区分组件，下面是一个注释函数，我正试图实现，但不起作用

p、 如果您需要任何澄清，请在评论部分告诉我

链接到代码：

import React，{Component，useState}来自“React”；
导出默认函数App（）{
常量[inputValues，setInputValues]=useState（[“测试]）；
const addNewInputvalue=（）=>{
设置输入值（（上一个）=>{
返回[…上一个“”]；
});
};
常量removeInput=（索引）=>{
设置输入值（（上一个）=>{
常量副本=[…上一个]；
拷贝。拼接（索引，1）；
返回副本；
});
};
//常量handleChange=（事件）=>{
//event.persist（）
//setData（prev=>（{…prev[event.target.name]：event.target.value}））
// }
常量handleInputChange=（索引，值）=>{
设置输入值（（上一个）=>{
常量副本=[…上一个]；
复制[索引]=值；
返回副本；
});
};
const consoleAllValues=（）=>{
console.log（输入值）；
};
返回(
新输入
{inputValues.map（（val，i）=>{
返回(
移除输入（i）}
/>
>
);
})}
控制台记录所有值
);
}
常量组件二=（道具）=>{
返回(
输入：{props.index}

props.onChange（props.index，e.target.value）}
type=“text”
value={props.value}
/>
删除输入
);
};

您应该创建一个键值对象，而不是使用数组来存储值。查看我对您的状态所做的更改，在return语句中遍历对象的方式，以及操纵状态的所有函数

import React, { Component, useState } from "react";


export default function App() {
    const [inputValues, setInputValues] = useState({
      'componentTwo': 'val1',
      'componentThree': 'val2',
      'componentFour': 'val3',
    });

    const addNewInputvalue = (name, value) => {
        setInputValues((prev) => {
            return {
              ...prev,
              [name]: value,
            }
        });
    };

    const removeInput = (name) => {
        setInputValues((prev) => {
            const copy = {...prev};
            delete copy[name];

            return copy;
        });
    };

    const handleInputChange = (name, value) => {
        setInputValues((prev) => {
          return {
            ...prev,
            [name]: value,
          };
        });
    };

    const consoleAllValues = () => {
        console.log(inputValues);
    };

    return (
        <div className="App">
            <button onClick={addNewInputvalue}>New Input</button>
            {Object.keys(inputValues).map((name, i) => {
                return (<div>
                    <ComponentTwo
                        key={name}
                        index={i}
                        value={inputValues[name]}
                        onChange={(value) => handleInputChange(name, value)}
                        removeInput={() => removeInput(name)}
                    />
                    <ComponentThree />
                    <ComponenFour />
                </div>
                    >
        );
            })}
            <button onClick={consoleAllValues}>console log all values</button>
        </div>
    );
}

const ComponentTwo = (props) => {
    return (
        <div>
            <p>Input: {props.index}</p>
            <input
                name={"right_value"}
                onChange={(e) => props.onChange(e.target.value)}
                type="text"
                value={props.value}
            />
            <button onClick={props.removeInput}>Remove Input</button>
        </div>
    );
};

import React，{Component，useState}来自“React”；
导出默认函数App（）{
常量[inputValues，setInputValues]=useState({
'组件二'：'val1'，
‘组件三’：‘val2’，
'componentFour'：'val3'，
});
const addNewInputvalue=（名称、值）=>{
设置输入值（（上一个）=>{
返回{
…上一页，
[名称]：值，
}
});
};
常量removeInput=（名称）=>{
设置输入值（（上一个）=>{
const copy={…prev}；
删除副本[名称]；
返回副本；
});
};
常量handleInputChange=（名称、值）=>{
设置输入值（（上一个）=>{
返回{
…上一页，
[名称]：值，
};
});
};
const consoleAllValues=（）=>{
console.log（输入值）；
};
返回(
新输入
{Object.keys（inputValues）.map（（名称，i）=>{
返回(
handleInputChange（名称、值）}
removeInput={（）=>removeInput（名称）}
/>
>
);
})}
控制台记录所有值
);
}
常量组件二=（道具）=>{
返回(
输入：{props.index}

props.onChange（e.target.value）}
type=“text”
value={props.value}
/>
删除输入
);
};

您应该创建一个键值对象，而不是使用数组来存储值。查看我对您的状态所做的更改，在return语句中遍历对象的方式，以及操纵状态的所有函数

import React, { Component, useState } from "react";


export default function App() {
    const [inputValues, setInputValues] = useState({
      'componentTwo': 'val1',
      'componentThree': 'val2',
      'componentFour': 'val3',
    });

    const addNewInputvalue = (name, value) => {
        setInputValues((prev) => {
            return {
              ...prev,
              [name]: value,
            }
        });
    };

    const removeInput = (name) => {
        setInputValues((prev) => {
            const copy = {...prev};
            delete copy[name];

            return copy;
        });
    };

    const handleInputChange = (name, value) => {
        setInputValues((prev) => {
          return {
            ...prev,
            [name]: value,
          };
        });
    };

    const consoleAllValues = () => {
        console.log(inputValues);
    };

    return (
        <div className="App">
            <button onClick={addNewInputvalue}>New Input</button>
            {Object.keys(inputValues).map((name, i) => {
                return (<div>
                    <ComponentTwo
                        key={name}
                        index={i}
                        value={inputValues[name]}
                        onChange={(value) => handleInputChange(name, value)}
                        removeInput={() => removeInput(name)}
                    />
                    <ComponentThree />
                    <ComponenFour />
                </div>
                    >
        );
            })}
            <button onClick={consoleAllValues}>console log all values</button>
        </div>
    );
}

const ComponentTwo = (props) => {
    return (
        <div>
            <p>Input: {props.index}</p>
            <input
                name={"right_value"}
                onChange={(e) => props.onChange(e.target.value)}
                type="text"
                value={props.value}
            />
            <button onClick={props.removeInput}>Remove Input</button>
        </div>
    );
};

import React，{Component，useState}来自“React”；
导出默认函数App（）{
常量[inputValues，setInputValues]=useState({
'组件二'：'val1'，
‘组件三’：‘val2’，
'componentFour'：'val3'，
});
const addNewInputvalue=（名称、值）=>{
设置输入值（（上一个）=>{
返回{
…上一页，
[名称]：值，
}
});
};
常量removeInput=（名称）=>{
设置输入值（（上一个）=>{
const copy={…prev}；
删除副本[名称]；
返回副本；
});
};
常量handleInputChange=（名称、值）=>{
设置输入值（（上一个）=>{
返回{
…上一页，
[名称]：值，
};
});
};
const consoleAllValues=（）=>{
console.log（输入值）；
};
返回(
新输入
{Object.keys（inputValues）.map（（名称，i）=>{
返回(
handleInputChange（名称、值）}
removeInput={（）=>removeInput（名称）}
/>
>
);
})}
控制台记录所有值
);
}
常量组件二=（道具）=>{
返回(