按下按钮应显示文本输入字段

Question

我想要输出，每当我按'编辑'时，都应显示一些textInput字段。如何为此编写功能？以及如何将这些TextInput值存储在变量中？是否可以通过按"编辑"来创建一个具有文本输入fiellds并调用的函数？谢谢你

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

这是一个文本输入，每当您更改值（在其中输入的文本）时，都会在状态下保存使用键'text -input'

下一步：

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

轻松访问它

希望它有帮助。