jd-opensource / jd-opensource/taro-ui

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

Open
#1,400 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

### Taro UI 版本信息

3.0.0-alpha.3

### 问题描述

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

### 复现步骤

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

### 复现代码

```javascript
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 (


添加


{userList.map((it, index) => (

))}


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

### 补充信息

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.