Question

我希望输出就像每当我按下＆＃39;编辑＆＃39;它应该显示一些textInput字段。我该怎么写函数呢？以及如何将这些textInput值存储在变量中？可以创建一个具有TextInput fiellds的函数，并通过按下＆＃39;编辑＆＃39;？谢谢

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。仅当状态中shouldShow的值为true时才会呈现。

默认值shouldShow的值为false，当用户点击“编辑”按钮时，状态中的值将会更改，并且会显示TextInput。

TextInput中输入的值也会保存在州，您可以通过this.state.textinput轻松访问

希望它有所帮助。

按下按钮它应显示TextInput字段

1 个答案: