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

Question

我有一组对象，我基于这些对象生成了一组 ReactJS 组件。

然后在渲染方法中渲染这些。简而言之代码如下，

获取组件() :

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 处理程序：

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

渲染（）：

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

组件呈现时，我得到两个文本框。但是当更改文本框中的值时，即使我更改了 Input1.

，我也会得到 'Input2' 的控制台日志

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

当前行为：

Changing text in Input1 has a console log of 'Input2'

Changing text in Input2 has a console log of 'Input2'

预期行为：

Changing text in Input1 has a console log of 'Input1'

Changing text in Input2 has a console log of 'Input2'

Answer 1

用以下代码替换 onChange 中的粗箭头函数时，我得到了预期的行为。

onChange={this.inputChange.bind(this, name)}

谁能帮我理解为什么 .bind 有效而粗箭头功能无效？

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

Component's onChange function being passed the last parameter value when the ReactJS components are rendered from an array

javascript

arrays

onclick

reactjs

antd

获取组件() :

onChange 处理程序：

渲染（）：

当前行为：

预期行为：