📅  最后修改于: 2020-12-08 06:07:10             🧑  作者: Mango
在本章中,我们将向您展示如何在React Native中使用TextInput元素。
Home组件将导入并渲染输入。
import React from 'react';
import Inputs from './inputs.js'
const App = () => {
return (
)
}
export default App
我们将定义初始状态。
定义初始状态后,我们将创建handleEmail和handlePassword函数。这些功能用于更新状态。
login()函数将仅警告状态的当前值。
我们还将在文本输入中添加其他一些属性以禁用自动大写字母,删除Android设备上的底部边框并设置一个占位符。
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 (
this.login(this.state.email, this.state.password)
}>
Submit
)
}
}
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按钮时,来自输入的文本将显示在对话框中。
每当我们在输入字段之一中键入内容时,状态都会更新。当我们单击Submit按钮时,来自输入的文本将显示在对话框中。