有没有办法让 TextInput 表现得像一个按钮，即能够被选中（onPress）？答案

【问题标题】：Is there a way for a TextInput to behave like a button i.e. be able to be selected (onPress)?有没有办法让 TextInput 表现得像一个按钮，即能够被选中（onPress）？
【发布时间】：2020-09-01 04:42:09
【问题描述】：

我正在制作一个反应原生健康应用程序，用户可以在其中选择标签来描述他们面临的某些症状。我试图让用户创建自己的标签，目前用户可以输入标签但不能选择它们。有没有办法让他们选择文本输入？

我已经尝试在它周围包裹可触摸的不透明度，但是当我按下文本输入时，光标只聚焦在单词上（希望我编辑单词）。

我也尝试过 editable = {false} 这消除了用户完全输入文本输入的能力。有没有办法让用户输入一次值然后禁用文本输入（不可编辑）？

或者如果我使用 Button 而不是 TextInput 是否有办法让用户输入按钮的标题以便它可以充当标签？

这是我允许用户创建文本输入的方式

 addTextInput = (index) => {
    let textInput = this.state.textInput;
    textInput.push(
        <TextInput
            style={styles.textInput}
            onChangeText={(text) => this.addValues(text, index)}
            editable={true}              
        />
    );

    this.setState({ textInput });
}

removeTextInput = () => {
    let textInput = this.state.textInput;
    let inputData = this.state.inputData;
    textInput.pop();
    inputData.pop();
    this.setState({ textInput, inputData });
}

这就是我当前的标签的样子：

在用户按下加号时的图片上创建了一个新的标签/TextInput，我想要的是当用户按下它时，它应该能够改变颜色等。

这是加号按钮的代码：

<View style={{
    flexDirection: 'row', 
    flexGrow: '1', 
    flexWrap: 'wrap', 
    width: Responsive.width(300)
}}>
    
    {this.state.textInput.map((value) => {
        return value
    })}

    <TouchableWithoutFeedback onPress={() => {
        this.addTextInput(this.state.textInput.length)
    }}>
        <Image
            style={{ marginLeft: 8, width: 38, height: 38 }}
            source={require('../../../assets/plusButton.png')}
        />
    </TouchableWithoutFeedback>

    {/* <Button title='Get Values' onPress={() => this.getValues()} /> */}

</View>

<View style={styles.row}>
    <View style={{ margin: 10, top: Responsive.height(75) }}>
        <Button onPress={() => this.removeTextInput()}>Remove</Button>
    </View>
</View>

【问题讨论】：

标签： ios reactjs react-native tags

【解决方案1】：

我遇到了类似的问题，并通过 TextInput 上的 TouchableOpacity 解决了它。使用 zIndex 和绝对定位，您可以在文本输入上扩展 TouchableOpacity 并将其转换为按钮，TouchableOpacity 必须具有 100% 的不透明度。您可以使用 { condition && } 控制您的逻辑，使其表现得像按钮或 TextInput。

export default function App() {
  const [m,setm]=React.useState(false);
  return (
    <View>
      <TouchableOpacity style={{zIndex:10, position:'absolute', width: '100%', height: '100%', opacity:'100%'}} onPress={()=>{setm(!m)}} />
      <TextInput style={{zIndex:1,backgroundColor:'#fbb',color:'#000'}} value={m}/>
    </View>
  );
}

【讨论】：