CODEWITHSUNDEEP
reactjsreact-native
Endar
Endar

Reputation: 73

Make Text editable on (onPress)

How can i make a some text editable when user press button ?

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

Upvotes: 2

Views: 5421

Answers (2)

Matt Aft
Matt Aft

Reputation: 8936

Similar to Travis's answer but you can just toggle the editable prop on the textInput. You can add handleEditable to the button's onPress and that will make the textInput editable.

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

Upvotes: 6

Travis White
Travis White

Reputation: 1977

Have the button toggle a state variable indicating if we are in edit mode and display a TextInput instead of Text if we are in edit mode:

<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>

Upvotes: 4

Related Questions