反应中的输入矩阵

【问题标题】：Matrix of input in react反应中的输入矩阵
【发布时间】：2016-07-05 10:12:32
【问题描述】：

我想在 react 中构建一个复杂的表单。它是一个输入矩阵，当输入值发生变化时我需要进行操作。我想为所有输入的“onchange”调用相同的函数，但我需要知道哪个输入调用了该函数。最好的方法是什么？

将我的所有输入值存储在我存储在组件状态中的 javascript 数组中是否是个好主意。当输入值发生变化时，我可以在我的函数中操作这个数组。我不确定这是一个好习惯。

有什么建议吗？我是 React 新手，我找到的所有示例都是简单的形式。谢谢！

【问题讨论】：

【解决方案1】：

你可以这样做：

class MyComponent extends React.Component
  _createOnChangeFunction = (inputIndex) => {
    return () => {
      // The magic of closures helps you out here
      console.log(`INPUT ${inputIndex} CHANGED`);
    }
  }

  render() {
    myElements = [];
    for(i = 0; i < NUMBER_OF_INPUTS; i++) {
      myElements.push(<input type='checkbox' value={i} onChange={this._createOnChangeFunction(i)} />);
    }

    return (
      <div>
        {myElements}
      </div>
    }
  }

}

（请注意，您必须提供 NUMBER_OF_INPUTS 以及您在函数中实际想要执行的操作）

有关我使用的闭包的一个很好的例子，请查看这篇文章：How do JavaScript closures work?

【讨论】：