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

116 阅读 0 评论 77 点赞

我是靠谱客的博主活力云朵，这篇文章主要介绍React Native输入框获取输入的内容、输入框的密码类型，现在分享给大家，希望可以做个参考。

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

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

onChangeText 当文本框内容变化时调用此函数。改变后的文字内容会作为参数传递。
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)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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才能使输入框为密码类型！

有问题可以留言~