Làm thế nào để có được giá trị mà là trong TextInput khi Button là nhấp vào 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

Trước tiên, bạn phải lưu trữ dữ liệu của mình ở trạng thái.

dụ:

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

Sau đó, bạn phải vượt qua một chức năng mà sẽ thực hiện khi bạn nhấp vào nút như thế này:

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

phục hồi giá trị của bạn với: this.state.key

dụ:

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> 
    ); 
    } 
} 

Tôi đã không kiểm tra mã này nhưng nó sẽ hoạt động

Answer 2

Bạn có thể nhận được giá trị từ bang tức là this.state.username.

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

Answer 3

Trong tiểu bang của bạn, bạn có tên và mật khẩu và trong kết xuất của bạn(), bạn đang yêu cầu tên. Nếu bạn muốn tên, bạn nên đặt nó trong trạng thái là tốt.

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

Nếu bạn muốn để có được tên truy cập và mật khẩu,

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

hãy có một cái nhìn vào ví dụ dưới đây:

Thiết lập các nhà nước trong xây dựng

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

phương thức hiển thị được gọi khi trang tải:

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

gọi onChange và setstate của tên người dùng và mật khẩu

this.setState ({password: mật khẩu})}

 placeholder = "password"/> 

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

phương pháp nhập được tên người dùng nhập và mật khẩu

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

này sẽ làm điều đó chàng trai.