Drücken auf die Schaltfläche sollte TextInput Felder angezeigt werden

Question

Ich möchte die Ausgabe wie, wann immer ich auf "Bearbeiten" drücken, sollte es einige TextInput Felder anzeigen. Wie kann ich Funktion dafür schreiben? und wie diese TextInput-Werte in Variable gespeichert werden? Ist das möglich, um eine Funktion zu erstellen, die TextInput fiellds hat und aufruft, indem du auf 'edit' drückst? danke

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity, 
    TextInput, 
    TouchableHighlight, 
    Alert 
} from 'react-native'; 
import Button from 'react-native-button' 
import {Actions} from 'react-native-router-flux' 
import Home from './Home' 

export class Bp extends Component{ 
    state={ 
      responseBody:"" 
     } 

    _onPressButtonPOST(){ 
      return fetch("URL", { 
      method: "POST", 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({entryDate:"2/27/2017 11:11 AM",systol:"900"}) 
     }) 

     .then((responseData) => { 
      this.setState({ 
         responseBody: JSON.stringify({entryDate:"2/27/2017 11:11 AM",systol:"900"}) 
         }) 
      }) 
     .done(); 
    } 
render(){ 
     return(
      <View> 
     <TouchableOpacity> 
        <Text> Edit </Text> 
      </TouchableOpacity> 

      <TouchableOpacity onPress={this._onPressButtonPOST.bind(this)} > 
      <Text> Show </Text> 
          {this._renderBody(this.state.responseBody)} 
         </TouchableOpacity> 
     </View> 
      ); 
    } 

    _renderBody(responseBody){ 
      if(responseBody){ 
      var parsedBody=JSON.parse(responseBody); 
      return (<View> 
        <Text>{parsedBody.entryDate}</Text> 
        <Text>systolic:{parsedBody.systolic}</Text> 
        <Text>diastolic:{parsedBody.diastolic}</Text> 
        <Text>pulseRate:{parsedBody.pulseRate}</Text> 
       </View>); 
      } 
       } 
} 

module.exports = Bp; 

Answer 1

Nun, Sie wollen ein Textfeld.

<TextInput 
     onChangeText={(text) => this.setState({textinput: text})} 
     value={textinput} 
     /> 

Dies ist ein TextInput-, jedes Mal ändern Sie den Wert (Text in sie eingegeben) Wert wird in dem Zustand, mit dem Schlüssel 'TextInput-'

Nächster Schritt gespeichert werden:

this.state={ 
textinput: '', 
shouldShow: false 
} 

<TouchableOpacity 
onPress={()=>{ this.setState({ shouldShow: !this.state.shouldShow })}} 
><Text>Edit</Text></TouchableOpacity> 
{this.state.shouldShow ? <TextInput 
      onChangeText={(text) => this.setState({textinput: text})} 
      value={textinput} 
      /> : null} 

TextInput- wird nur bedingt gerendert.Es wird nur gerendert, wenn der Wert shouldShow im Status true ist.

Der Wert shouldShow ist standardmäßig false. Wenn der Benutzer auf die Schaltfläche Bearbeiten klickt, wird der Wert im Status geändert und TextInput wird angezeigt.

auch der eingegebene Wert im TextInput im Zustand gespeichert wird, können Sie es leicht über Zugang this.state.textinput

Hoffe, es hilft.