如何獲得這些都是TextInput在按鈕值單擊ReactNative

Question

1 index.android.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    ScrollView, 
    TextInput, 
    View , 
} from 'react-native'; 

var styles = require('./Style/customStyle'); 

import Button from 'react-native-button'; 
import RadioButton from 'react-native-radio-button' 

class AwesomeProject extends Component { 

    constructor(props){ 
    super(props) 

    this.state = { 
     username: '', 
     password: '', 
    } 
    } 

    render() { 
    return (
    <ScrollView style={styles.content}> 
     <View style={styles.content}> 

     <Text style={styles.welcome}> 
      Create Account 
     </Text> 

     <Text style={styles.textStyle}> 
      Name 
     </Text> 

     <TextInput 
      style={styles.textInputStyle} 
      placeholder="Enter Name" 
      returnKeyLabel = {"next"} 
      onChangeText={(text) => this.setState({text})} 
     /> 

     <Button style={styles.buttonStyle}> 
       Submit 
     </Button> 

     </View> 
     </ScrollView> 
    ); 
    } 
} 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

Answer 1

首先，您必須將數據存儲在一個狀態中。

例如：this.state.key

例如：

<Button 
     onPress={() => function }> 

與恢復值：

<TextInput 
      style={styles.textInputStyle} 
      placeholder="Enter Name" 
      returnKeyLabel = {"next"} 
      onChangeText={(text) => this.setState({text})} 
/> 

然後，你必須在你點擊這樣的按鈕，通過將執行的功能：

class AwesomeProject extends Component { 

    constructor(props){ 
    super(props) 

    this.state = { 
     username: '', 
     password: '', 
    } 
    } 

    _handlePress() { 
    console.log(this.state.username); 
    console.log(this.state.password); 
    } 

    render() { 
    return (
    <ScrollView style={styles.content}> 
     <View style={styles.content}> 

     <Text style={styles.welcome}> 
      Create Account 
     </Text> 

     <Text style={styles.textStyle}> 
      Name 
     </Text> 

     <TextInput 
      style={styles.textInputStyle} 
      placeholder="Enter Name" 
      returnKeyLabel = {"next"} 
      onChangeText={(text) => this.setState({username:text})} 
     /> 

     <Text style={styles.textStyle}> 
      Name 
     </Text> 

     <TextInput 
      style={styles.textInputStyle} 
      placeholder="Enter Name" 
      returnKeyLabel = {"next"} 
      onChangeText={(text) => this.setState({password:text})} 
     /> 

     <Button 
      onPress={() => this._handlePress()} 
      style={styles.buttonStyle}> 
       Submit 
     </Button> 

     </View> 
     </ScrollView> 
    ); 
    } 
} 

我沒有測試這個代碼，但它應該工作

Answer 2

您可以從狀態即this.state.username獲得價值。

<Button 
    style={styles.textInputStyle} 
    onPress={() => console.log(this.state.username)}> 
     Submit 
</Button> 

Answer 3

在你的狀態，你有usename和密碼，並且在你的render（）中，你要求一個名字。如果你想要這個名字，你應該把它放在這個狀態。

this.state = { 
      username: '', 
      password: '', 
      name: '' 
     } 

如果你想獲得用戶名和密碼，

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    ScrollView, 
    TextInput, 
    View , 
} from 'react-native'; 

var styles = require('./Style/customStyle'); 

import Button from 'react-native-button'; 
import RadioButton from 'react-native-radio-button' 

class AwesomeProject extends Component { 

    constructor(props){ 
    super(props) 

    this.state = { 
     username: '', 
     password: '', 
    } 
    } 

    onUsernameChange(username) { 
    let s = this.state; 
    s.username = username; 
    this.setState(s); 
    } 

    onPasswordChange(password) { 
    let s = this.state; 
    s.password = password; 
    this.setState(s); 
    } 

    render() { 
    return (
    <ScrollView style={styles.content}> 
     <View style={styles.content}> 

     <Text style={styles.welcome}> 
      Create Account 
     </Text> 

     <Text style={styles.textStyle}> 
      Name 
     </Text> 

     <TextInput 
      style={styles.textInputStyle} 
      placeholder="Enter Username" 
      returnKeyLabel = {"next"} 
      onChangeText={this.onUsernameChange} 
     /> 

     <TextInput 
      style={styles.textInputStyle} 
      placeholder="Enter Password" 
      returnKeyLabel = {"next"} 
      onChangeText={this.onPasswordChange} 
     /> 

     <Button style={styles.buttonStyle}> 
       Submit 
     </Button> 

     </View> 
     </ScrollView> 
    ); 
    } 
} 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

Answer 4

請看看下面的例子：

設置在構造

constructor(){ 
super(); 
this.state = {isLoggedIn : false, email :"", password : ""}; 
} 

狀態在調用render方法時調用頁面加載：

render() { 
return (
    <View style={styles.container}> 
    <TextInput style={styles.input} 
     placeholder = "Username" 
     returnKeyType = "next" 
     underlineColorAndroid='transparent' 
     onChange = {(text) => this.setState({email : text})} 
    /> 
    <TextInput style={styles.input} 
     secureTextEntry 
     returnKeyType= 'go' 
     onChange = {(password) => this.setState({password : password})} 

呼叫的用戶名和密碼

this.setState的的onChange和的setState（{密碼：密碼}）}

 placeholder = "password"/> 

    <TouchableOpacity style={styles.clickContainer} onPress= 
{this.login.bind(this)}> 
     <Text style={styles.buttonText} >Login</Text> 
    </TouchableOpacity> 
    </View> 
); 
    } 

登錄方法獲取輸入的用戶名和密碼

login(){ 
console.log(this.state.email); 
this.setState({isLoggedIn : true}); 
} 

Answer 5

<TextInput editable={true} style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
    onChangeText={(text1) => this.setState({text1})} 
    value={this.state.text1} /> 

    <Button 
     onPress={()=>Alert.alert(this.state.text1)} 
     title="Press Me" 
     color="#841584" 
     /> 

這將做到這一點的傢伙。