时间戳

首页 > 解决方案 > TextInput 元素顶部的按钮不起作用

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

问题描述

我正在尝试在多行文本输入之上制作可见的按钮列表，该列表现在正在工作。但是，当我单击其中一个按钮时，什么也没有发生。

我正在使用 zIndex 将 childComponent 置于 TextInput 之上，现在当我单击这些按钮时，TextInput 获得焦点而不是触发按钮单击事件。

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

示例代码结构如下：*

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

我正在尝试这个

标签： reactjsreact-native

解决方案

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

为子组件的视图赋予绝对位置

推荐阅读