reactjs - 如何在 React Native 中获取输入值？

Question

能否请您告诉我如何获取 input field 值，或者换句话说，点击按钮时的用户名和密码输入字段值。

这是我的代码 https://rnplay.org/apps/drT9vw

import React from 'react';
import {
  registerComponent,
} from 'react-native-playground';
import {
      Text,
    View,
    Image,
    StyleSheet,
    TextInput,
    TouchableHighlight
} from 'react-native';

class App extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            userName :'',
            password:''
        };
    }

    login(){
        alert(this.state.userName)
    }
    OnChangesValue(e){
        console.log(e.nativeEvent.text);
        this.setState({
            userName :e.nativeEvent.text,
        })
    }

    changePassword(e){
        console.log(e.nativeEvent.text);
        this.setState({
            password :e.nativeEvent.text,
        })
    }

    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.heading}> Login</Text>
                <TextInput
                    style={styles.loginInput}
                    onChange={(text)=> this.setState({userName:text})}
                    ref="myInput"
                    underlineColorAndroid='transparent'
                    placeholder="username !"
                />
                <TextInput
                    style={styles.loginInput}
                    ref="pass"
                    onChange={this.changePassword.bind(this)}
                    underlineColorAndroid='transparent'
                    placeholder="password to ff!"
                    secureTextEntry={true}
                />
                <TouchableHighlight style={styles.touchable} onPress={this.login.bind(this)}>
                    <Text style={styles.touchableButton}>Click</Text>
                </TouchableHighlight>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EF501E',
        flex: 1,
        alignItems: 'center',
        padding :20
    },
    logo: {
        width: 50,
        height: 50
    },
    heading: {
        fontSize: 30,
        marginTop: 20
    },
    loginInput: {
        height: 50,
        alignSelf: 'stretch',
        borderWidth: 1,
        borderColor: '#33090C',
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom:10
    },
    touchable:{
        backgroundColor:'#2E18DD',
        height:40,
        alignSelf:'stretch',
        alignItems:'center',
        justifyContent:'center'

    },
    touchableButton:{
      color:'#fff',
        fontSize:10
    }
});

registerComponent(App);

更新

login(){
        alert(this.refs.myInput.value)
    }

它给出未定义的

Answer 1

没有得到确切的问题，你将用户名和密码存储在状态变量中。因此，您可以通过 this.state.userName 和 this.state.password 获取值。或者你也可以使用 refs 来获取这样的值:this.refs.myInput.value。

改变这个乐趣:

changePassword(text){
    console.log(text);
    this.setState({
        password :text,
    })
}

在 tutorialspoint 上查看相同的示例:https://www.tutorialspoint.com/react_native/react_native_text_input.htm