Question

当用户按下按钮时，如何使某些文本可编辑？

 <View style={styles.inner}>
          <Text style={styles.t1}>Name</Text>
          <Text style={styles.t2}
          onPress={this.updateText}>{this.state.txt}</Text> 
      </View>

Answer 1

让按钮切换状态变量，指示我们是否处于编辑模式，如果我们处于编辑模式，则显示TextInput而不是Text：

<View style={styles.inner}>
  <Text style={styles.t1}> Name </Text>

  { this.state.isEditing ?
    <TextInput
      value={this.state.txt}
      onChangeText={(value) => this.setState({ txt: value })}
      autoFocus
      onBlur={() => this.setState({ isEditing: false })}
    /> :
    <Text
      style={styles.t2}
      onPress={() => this.setState({ isEditing: true })}
    >
      {this.state.txt}
    </Text> 
  }
</View>

Answer 2

与Travis的答案类似，但您可以在textInput上切换editable道具。您可以将handleEditable添加到按钮的onPress上，这样可以使textInput可编辑。

handleEditable = () => this.setState({ editable: true })
...
...
<TextInput
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
  editable={this.state.editable}
/>

使文本可编辑（onPress）

2 个答案: