当从数组呈现ReactJS组件时，组件的onChange函数将传递最后一个参数值

Question

我有一个对象数组，基于此我生成一个ReactJS组件数组。

然后，这些将在render方法中呈现。简称如下，

getComponents（）：

f = [{name: 'Input1', colSpan: 5}, {name: 'Input2', colSpan: 10}];
var renderedComponents = [];

for(i=0;i < f.length;i++){

 var name = f.name;
 var colSpan = f.colSpan;

 renderedComponents.push(
      <Col span={colSpan} key={i} style={{marginRight: 5}}>
        <FormItem {...fieldbounds} {...fieldparams}>
          <Input
          onChange={(e)=> {this.inputChange(name, e)}}
          />
        </FormItem>
      </Col>
    );
  }

return renderedComponents;

onChange Handler：

inputChange = (n,e) => {
  console.log(n);
}

渲染（）：

render(){
    return(<div>{this.getComponents()}</div>);
}

当组件渲染时，我得到两个文本框。但是当更改文本框中的值时，即使我更改Input1，我也会获得“Input2”的控制台日志。

看起来name属性在呈现时被赋予f数组的最后一个值。

目前的行为：

在Input1中更改文本的控制台日志为“Input2”

在Input2中更改文本的控制台日志为“Input2”

预期行为：

在Input1中更改文本的控制台日志为“Input1”

在Input2中更改文本的控制台日志为“Input2”