发布
社区首页 >问答首页 >TextInput元素顶部的按钮不起作用

TextInput元素顶部的按钮不起作用
EN

Stack Overflow用户
提问于 2020-06-20 21:26:41
回答 1查看 32关注 0票数 0

我正在尝试使一个多行文本输入顶部的按钮列表可见,现在可以使用了。但是当我点击这些按钮中的一个时,什么也没有发生。

我使用zIndex将childComponent放在TextInput之上,现在当我点击这些按钮时,TextInput会获得焦点,而不是触发按钮点击事件。

我刚刚开始学习react-native,所以我不能理解我需要在哪里进行更改才能使其正常工作。

示例代码结构如下:*

代码语言:javascript
代码运行次数:0
复制
const Component_1=()=>{

const UpdateTextInput=(ip,callType)=>{
console.log(ip);

}
return (<View keyboardShouldPersistTaps={'handle'}>

<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>


<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>

</View>
)
}



export default Component_1;

        
const ChildComponent=({callBackFunc})=>{

const [ButtonSection,SetButtonSection]=useState(false)

return (
    
<View style={{flexDirection:'row-reverse'}}>


<View style={{flexDirection:'column',width:'15%',position:'absolute'}}  >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}

/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
  
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}

/>
</TouchableOpacity>

<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}  keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
    <Item/>
</ScrollView>

</View>
)

}

export default ChildComponent

EN

回答 1

Stack Overflow用户

发布于 2020-06-20 22:48:54

不使用zIndex,而使用视图中的绝对位置。position: 'absolute'

为子零部件的视图提供绝对位置

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62486422

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档