कैसे प्राप्त करने के लिए मान जो 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

अपने राज्य में, आपके पास उपयोगकर्ता नाम और पासवर्ड है और आपके प्रस्तुत करने में(), आप एक नाम मांग रहे हैं। यदि आप नाम चाहते हैं, तो आपको इसे राज्य में भी रखना चाहिए।

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() { 
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})} 

कॉल onChange और यूज़रनेम और पासवर्ड

this.setState की 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" 
     /> 

यह लोग क्या करेंगे मिलता है।