按下按鈕它應該顯示TextInput字段

我想要的輸出就像每當我按'編輯'它應該顯示一些textInput字段。我該如何編寫函數？以及如何將這些textInput值存儲在變量中？是否有可能創建一個TextInput函數並通過按'編輯'來調用？謝謝按下按鈕它應該顯示TextInput字段

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;

來源

2017-03-01 Prasanna

那麼，你想要一個文本字段。

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

這是一個TextInput，每次您更改值（文字就進入）值將與關鍵 '的TextInput'

下一步將保存在狀態：

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將僅在條件狀態下呈現shouldShow的值時爲true。

默認shouldShow的值爲false，當用戶點擊編輯按鈕時，狀態值將被改變，並且TextInput將被顯示。

也在TextInput輸入的值保存在狀態，你可以很容易地通過this.state.textinput

訪問它希望它幫助。

來源

2017-03-01 09:09:56 Ataomega

這是有幫助的。以及如何在上面的代碼中將textInput值分配給'systol'？ – Prasanna

好吧，而不是systol只是使用>>>正文：JSON.stringify（{entryDate：「2/27/2017 11:11 AM」，systol：this.state.textinput}） – Ataomega

非常感謝你.. – Prasanna

按下按鈕它應該顯示TextInput字段

回答

相關問題