在 ReactNative 中单击 Button 时如何获取 TextInput 中的值

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

您可以从 state 中获取值，即 this.state.username.

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

Answer 2

首先，您必须将数据存储在一个状态中。

示例：

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

然后你必须传递一个函数，当你点击按钮时会执行这个函数：

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

恢复您的价值：this.state.key

示例：

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 3

在你的状态下，你有用户名和密码，在你的 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() {
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})}

call onChange and setState of username and password

this.setState({password : password})}

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

伙计们，这就够了。

Answer 6

我尝试了以下代码，它对我有效。就是建立变量，然后让textinput的值成为这个变量。您可以将变量作为 textinput 的值进行处理。

//This is an example of online Emulator by https://aboutreact.com
import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput, Alert, Button } from 'react-native';

const App = () => {
  const [name, setname] = useState('')
  const [secret, setsecret] = useState('')
  var Value = name;
  var secret_Value = secret;
  return (
    <View style={styles.container}>
      <TextInput 
        style={styles.input}
        placeholder='write here'
        value={Value}
        onChangeText={(Value) => {
          setname(Value)
          
        }}
      />
      <TextInput 
        style={styles.input}
        placeholder='write here'
        value={secret_Value}
        onChangeText={(secret_Value) => {
          setsecret(secret_Value)
          
        }}
      />
      <Button title='submit' onPress={() => {
        if (Value === 'Omar' && secret_Value === '123'){
          Alert.alert('Done')
        }
      }}/>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#D3BFA1',
    alignItems: 'center',
    justifyContent: 'center'
  },
  input: {
    borderBottomWidth: 1,
    width: '50%',
    marginVertical: 5
  },
});

在 ReactNative 中单击 Button 时如何获取 TextInput 中的值

How to get values which are in TextInput when Button is click in ReactNative

react-native

react-native-android