Taro AtInput在循环时通过onChange事件传入下标，获取到的是最后一个

[congyaqwq]

Taro UI 版本信息

3.0.0-alpha.3

问题描述

使用TaroUI AtInput在数组map时，将传入的第二个参数下标放到onChange事件中，打印的会是数组的长度。

复现步骤

1. 遍历数组，循环写入AtInput
2. 添加点击事件并将下标传入onChange事件中
3. 观察打印

复现代码

import React, { Component } from "react";
import { View } from "@tarojs/components";
import { AtForm, AtButton, AtInput } from "taro-ui";

import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/button.scss";

class Index extends Component {
  state = {
    userList: [{ key: 1 }]
  };

  handleChange(index, val, e) {
    console.log(index, val, e);
    return val;
  }
  onAddNewRow() {
    const { userList = [] } = this.state;
    const newUserList = userList.concat({
      key: ~~(Math.random() * 100000),
      name: ""
    });
    this.setState({
      userList: newUserList
    });
  }

  render() {
    const { userList = [] } = this.state;
    return (
      <View>
        <AtButton
          type="primary"
          size="small"
          onClick={this.onAddNewRow.bind(this)}
        >
          添加
        </AtButton>
        <AtForm>
          {userList.map((it, index) => (
            <AtInput
              key={it.key}
              name="value"
              title="姓名"
              type="text"
              placeholder="请输入姓名"
              value={it.name}
              onChange={this.handleChange.bind(this, index)}
            />
          ))}
        </AtForm>
      </View>
    );
  }
}
export default Index;

报错信息

无报错信息

系统信息

 Taro CLI 3.0.18 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.3/bin/yarn
      npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.18 => 3.0.18 
      @tarojs/components: 3.0.18 => 3.0.18 
      @tarojs/mini-runner: 3.0.18 => 3.0.18 
      @tarojs/react: 3.0.18 => 3.0.18 
      @tarojs/runtime: 3.0.18 => 3.0.18 
      @tarojs/taro: 3.0.18 => 3.0.18 
      @tarojs/webpack-runner: 3.0.18 => 3.0.18 
      babel-preset-taro: 3.0.18 => 3.0.18 
      eslint-config-taro: 3.0.18 => 3.0.18 
      react: ^16.10.0 => 16.14.0 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.10 

补充信息

因为出现的打印一直为数组长度，可能考虑到循环中的闭包问题，希望能有帮助。

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[hjhwel]

我之前也遇到了，index 一直都是最后一个，我就把AtInput 提出去用组件包一下再取index

[congyaqwq]

我之前也遇到了，index 一直都是最后一个，我就把AtInput 提出去用组件包一下再取index

这个bug挺严重的啊，该修了，我用原生input了。

[hjhwel]

这个输入框是问题挺多，clear没法用，ios15 disabled不生效，我直接改了源码先将就吧

[congyaqwq]

有能力可以帮他们改一下的👍

[HisRyan]

AtInput的name字应该是动态不能重复

[hjhwel]

AtInput的name就算是放到不同的页面也不能重复，这就很麻烦了

[xl9-7]

循环出来的input如果name值都是一样的话他会取最后一项的数据，可以把name改成：name={value${it.id}}，只要name的值不一样就可以了