React - handleChange由一个函数的多个输入

Question

我在页面上有多个输入，我只想通过一个函数来处理更改，我已经使用此代码执行此操作：

    handleInputChange(event) {

        let modules = this.props.templateModules.slice()
        let inputs

        for(let i in modules) {
            inputs = modules[i].fields
        }

        for(let i in inputs){
            if(inputs[i].name === event.target.name){
                 inputs[i].value = event.target.value;
                 this.setState ({inputs});
                 break;
            }
        }
    }

来自控制台的那些模块的结构（在按钮点击时动态添加）是：

以及包含每个模块的输入字段：

正如您所看到的，遗憾的是这些名称并不是唯一的，因此如果页面上有多个模块，我的代码无法正常工作。我只想映射当前焦点模块的字段（猜测可能是一个选项），但不知道该怎么做。

有什么想法吗？ :)

Answer 1

好的，如果有人和我有同样的问题，我想我找到了解决方案。

我没有处理我最初在容器组件中那些输入的更改，而是将模块渲染分离成一个单独的类，所以结构现在看起来像这样......

 Container Component

      -> Presentational Component

           -> Module Component (class containing the function handleChange)

我不确定这是否是正确的方法，但这是我能想到让它发挥作用的唯一方式，而且工作正常！ ：）