【react-native】View标签包裹Input标签，View标签点击无效

[vfiee]

问题描述
View标签包裹Input标签，View标签点击事件无效

复现步骤
[复现问题的步骤]

1. View标签包裹Input标签，并为view添加点击事件
2. 点击事件控制台打印任意字符

[或者可以直接贴源代码，能贴文字就不要截图]

<View className="input-wrap" onClick={this.toSearch.bind(this)}>
              <Input type='text' className="top-input" value={keyword} disabled placeholder="请输入关键字搜索" />
              {keyword ? <Image mode='aspectFill' src={Close} className='close' onClick={this.clearKeyword.bind(this)} /> : ''}
            </View>

期望行为
正常执行点击事件

报错信息
没有报错，但控制台不打印任何东西【函数不执行】

系统信息

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.1.1.8]
• Node.js 版本 [e.g. v10.0.9]
• 报错平台 [react-native]

[Manjiz]

React Native 的特殊性，最终处理事件的也就只有一个层组件，通常实现你要的效果需要：

<TouchableOpacity onPress={() => console.log("Pressed")}>
  <TextInput
    pointerEvents="none"
  />
</TouchableOpacity>

即通过 pointerEvents 属性阻止内层捕获触摸事件（或只让外层组件捕获事件），这样 TextInput 会无法处理相关触摸操作，比如 focus。

所以并不建议这样写，你这里完全可以用 Text 来代替。如果确实有这个需要，可以传入给 Input 传入 pointerEvents（未支持）