按下按钮它应该显示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字段

回答

相关问题