React Native使用文本输入TextInput元素 – React Native实战教程 _ReactNative实战教程

上一章React Native实战教程请查看：React Native列表ListView
【React Native使用文本输入TextInput元素 – React Native实战教程】在本章中，我们将向你展示如何在React Native中使用TextInput文本输入元素。
Home组件将导入和渲染输入。
App.js

import React from 'react'; import Inputs from './inputs.js'; const App = () => { return < Inputs />; }; export default App;

文本输入TestInput我们将定义初始状态。
定义初始状态之后，我们将创建handleEmail和handlePassword函数，这些函数用于更新状态。
login()函数将仅提示状态的当前值。
我们还将向文本输入添加一些其他属性来禁用自动填充，删除Android设备的底部边框并设置占位符。
inputs.js

import React, {Component} from 'react'; import { View, Text, TouchableOpacity, TextInput, StyleSheet, } from 'react-native'; class Inputs extends Component { state = { email: '', password: '', }; handleEmail = text => { this.setState({email: text}); }; handlePassword = text => { this.setState({password: text}); }; login = (email, pass) => { alert('email: ' + email + ' password: ' + pass); }; render() { return ( < View style={styles.container}> < TextInput style={styles.input} underlineColorAndroid="transparent" placeholder="Email" placeholderTextColor="#9a73ef" autoCapitalize="none" onChangeText={this.handleEmail} />< TextInput style={styles.input} underlineColorAndroid="transparent" placeholder="Password" placeholderTextColor="#9a73ef" autoCapitalize="none" onChangeText={this.handlePassword} />< TouchableOpacity style={styles.submitButton} onPress={() => this.login(this.state.email, this.state.password)}> < Text style={styles.submitButtonText}> Submit < /Text> < /TouchableOpacity> < /View> ); } } export default Inputs; const styles = StyleSheet.create({ container: { paddingTop: 23, }, input: { margin: 15, height: 40, borderColor: '#7a42f4', borderWidth: 1, }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 40, }, submitButtonText: { color: 'white', }, });

每当我们输入一个输入字段时，状态都会更新。当我们单击Submit按钮时，来自输入的文本将显示在对话框中。