按下按钮它应该显示 TextInput 字段

Question

我想要这样的输出，每当我按下 'edit' 它应该显示一些 textInput 字段。我该如何为此编写函数？以及如何将这些 textInput 值存储在变量中？是否可以创建一个具有 TextInput 字段并通过按 'edit' 调用的函数？谢谢

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

嗯，你想要一个文本字段。

 <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 正在呈现 conditionally.it 仅当状态中 shouldShow 的值为 true.

时才会呈现

shouldShow的值默认为false，当用户点击编辑按钮时，状态下的值会改变，显示TextInput。

在 TextInput 中输入的值也保存在状态下，您可以通过 this.state.textinput

轻松访问它

希望对您有所帮助。

按下按钮它应该显示 TextInput 字段

pressing on button it should display TextInput fields

textinput

react-native