jd-opensource / jd-opensource/taro-ui
两个AtInput组件,第一个写了onFocus第一个没写,没写的也触发了第一个的onFocus事件
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**问题描述**
两个AtInput组件,第一个写了onFocus第一个没写,没写的也触发了第一个的onFocus事件
**复现步骤**
1. 引入AtForm和AtInput
2. 写两个AtInput,写入不同的name属性值。给AtInput1绑定onFucus,给AtInput2没绑定onFocus。
3. 小程序预览中,点击AtInput1触发onFocus事件,点AtInput2也触发AtInput1的onFocus事件。
```jsx
/**
* 选择品牌
*/
onChooseBrand(value, e) {
console.log(value, e);
Taro.navigateTo({
url: '/pages/carManage/carBrands',
// ...more code
})
}
this.setState({edit: {...this.state.edit, data: {...this.state.edit.data, model: e}}})}
>
```
在onFucus方法的第一行里输出的`e`是`TaroEvent`对象,我将其转为JSON贴在下面。下面是两次点击的输出。
```json
{"_stop":true,"_end":false,"defaultPrevented":false,"timeStamp":1622614888747,"type":"focus","mpEvent":{"type":"focus","timeStamp":633435,"target":{"id":"brand","offsetLeft":102,"offsetTop":14,"dataset":{}},"currentTarget":{"id":"brand","offsetLeft":102,"offsetTop":14,"dataset":{}},"mark":{},"detail":{"value":"0牌","height":0},"mut":false,"_userTap":true},"bubbles":true,"cancelable":true,"mark":{},"detail":{"value":"0牌","height":0},"mut":false,"_userTap":true}
```
```json
{"_stop":true,"_end":false,"defaultPrevented":false,"timeStamp":1622615025934,"type":"focus","mpEvent":{"type":"focus","timeStamp":770655,"target":{"id":"brand","offsetLeft":102,"offsetTop":14,"dataset":{}},"currentTarget":{"id":"brand","offsetLeft":102,"offsetTop":14,"dataset":{}},"mark":{},"detail":{"value":"0牌","height":0},"mut":false,"_userTap":false},"bubbles":true,"cancelable":true,"mark":{},"detail":{"value":"0牌","height":0},"mut":false,"_userTap":false}
```
可以看到,两次点击的不是同一个AtInput,但是触发了同一个onFocus事件,且两次的`TaroEvent.mpEvent.currentTarget.id`都是绑定了onFocus的AtInput的`name`属性值。
**期望行为**
onFocus事件单独绑定,不干扰其他组件。
**报错信息**

https://user-images.githubusercontent.com/32516078/120434385-02e22400-c3af-11eb-9fd3-51f72b500815.mov
**系统信息**
➜ sakurago git:(master) ✗ taro info
👽 Taro v3.1.2
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Taro CLI 3.1.2 environment info:
System:
OS: macOS 11.1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.12 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 3.1.2 => 3.1.2
@tarojs/components: 3.1.2 => 3.1.2
@tarojs/mini-runner: 3.1.2 => 3.1.2
@tarojs/react: 3.1.2 => 3.1.2
@tarojs/runtime: 3.1.2 => 3.1.2
@tarojs/taro: 3.1.2 => 3.1.2
@tarojs/webpack-runner: 3.1.2 => 3.1.2
babel-preset-taro: 3.1.2 => 3.1.2
eslint-config-taro: 3.1.2 => 3.1.2
react: ^17.0.0 => 17.0.2
taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.10
**补充信息**
根据你的调查研究,出现这个问题的原因可能在哪里?
感觉是绑定onFucus事件的时候没对id进行筛选,有一个onFocus存在时就给所有AtInput组件都绑定上了。
Contributor guide
Assessment
This issue has not been assessed yet.