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

首先，您必须在状态下存储数据。

示例：

<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 2

请看下面的示例：

在构造函数中设置状态

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

拨打用户名和密码的 onChange 和 setState

this.setState（{password：password}）}

cmd

登录方式获取输入的用户名和密码

if (e.CommandName == "endproj")
{

#region

    con.Open();
    SqlCommand cmd = new SqlCommand();
    cmd.Connection = con;
    cmd.CommandText = "UPDATE Project " +
        "SET Status='Finished' , EndDate=@EndDate WHERE OrderNo=@OrderNo";
    cmd.Parameters.Clear();
    cmd.Parameters.AddWithValue("@OrderNo", ltOrderNo.Text);
    cmd.Parameters.AddWithValue("@EndDate", DateTime.Now);
    cmd.ExecuteNonQuery();
    con.Close();

#endregion

    //CLEAR PARAMETERS
    cmd.Parameters.Clear();

#region

    con.Open();
    cmd.CommandText = "INSERT INTO Deliveries VALUES (@OrderNo, @Status)";
    cmd.Parameters.AddWithValue("@OrderNo", ltOrderNo.Text);
    cmd.Parameters.AddWithValue("@Status", "Pending");
    cmd.ExecuteNonQuery();
    con.Close();

#endregion

}

Answer 3

我尝试了以下代码并且它对我有用。就是建立变量，然后把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
  },
});

Answer 4

您可以从州获得价值，即this.state.username。

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

Answer 5

在你的州，你有用户名和密码，在你的渲染（）中，你要的是一个名字。如果你想要这个名字，你也应该把它放在这个状态。

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 6

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

这样做会有人。

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

6 个答案: