React Native输入框获取输入的内容、输入框的密码类型

RN并没有form表单，所以想要获取输入的内容，我们必须采取其他方式。

rn提供了以下几个方法可以获取输入的值：

1. onChangeText 当文本框内容变化时调用此函数。改变后的文字内容会作为参数传递。
2. onChange 当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。

我们可以利用onChageText来获取到内容。

首先我们定义state值，用于暂存用户输入的内容。

export default class Login extends Component{
    constructor(props){
        super(props);
        this.state={
            userName:null,
            userPassWord:null
        }
    }
    render(){
        return(
            <View style={styles.content}>
                <View style={styles.userinfo}>
                    <TextInput 
                        style={styles.input} 
                        placeholder="用户名" 
                        onChangeText={(text)=>this.getUserName(text)}/>

                    <TextInput 
                        style={styles.input} 
                        textContentType="password"
                        keyboardType="default"
                        secureTextEntry={true}
                        placeholder="密码" 
                        onChangeText={(text)=>this.getUserPassWord(text)} />
                </View>
                <View style={styles.loginButton}>
                <Button style={{height:50}} title="登录" onPress={()=>this.login()} />
                </View>
            </View>
        )
    }
    getUserName(text){
        this.setState({
            userName:text
        })
    }
    getUserPassWord(text){
        this.setState({
            userPassWord:text
        })
    }
    login(){
        console.log("用户名",this.state.userName)
        console.log("密码",this.state.userPassWord)
    }
}

上面就是获取内容的主要代码，通过onChangeText={(text)=>this.getUserName(text)}，text的值是用户输入时实时变化的值，最终的内容即是用户输入的内容。通过this.setState将此值赋给state里的值。在登陆的时候或者在提交的时候，就去调用state里面的值。

密码类型的输入框写法跟以前也有所不同。请注意： secureTextEntry={true} 定义了secureTextEntry为true才能使输入框为密码类型！

有问题可以留言~