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

【问题标题】：React - handleChange of multiple inputs by one functionReact - 通过一个函数处理多个输入的变化
【发布时间】：2017-08-24 09:01:15
【问题描述】：

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

    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;
            }
        }
    }

这些模块的结构（在按钮点击时动态添加）是：

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

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

有什么想法吗？ :)

【问题讨论】：

你能让 id 独一无二吗？
也许这篇文章对你有帮助：stackoverflow.com/questions/21029999/…
@funcoding 不是真的，如果可以的话，我不会问这个问题...谢谢，我会检查出来
你能分享整个 React 类吗？我想看看你如何呈现 html
它非常复杂，这就是为什么我将结构打印到控制台中

标签： javascript arrays reactjs

【解决方案1】：

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

我没有像最初那样处理容器组件中这些输入的变化，而是将模块渲染分离到一个单独的类中，因此目前的结构看起来像这样......

 Container Component

      -> Presentational Component

           -> Module Component (class containing the function handleChange)

我不确定这是否是正确的方法，但这是我能想到的让它工作的唯一方法，而且它有效！ :)

【讨论】：