在 ReactNative 中单击按钮时如何获取 TextInput 中的值 [英] How to get values which are in TextInput when Button is click in ReactNative

问题描述

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

推荐答案

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

First you have to stock your data in a state.

示例:

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

然后你必须传递一个当你点击按钮时会执行的函数，如下所示:

Then you must pass a function that will execute when you click on the button like this:

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

使用以下方法恢复您的价值:this.state.key

recover your value with : 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>
    );
  }
}

我没有测试这段代码，但它应该可以工作

I didn't test this code but it should works

这篇关于在 ReactNative 中单击按钮时如何获取 TextInput 中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！