javascript - React - 通过一个函数处理多个输入的变化

Question

我在页面上有多个输入，我只想通过一个函数来 handleChange，我已经用这段代码做了:

    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)

我不确定这是否是正确的方法，但这是我能想到的使它起作用的唯一方法，而且它起作用了! :)