如何在 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,
    })
}

在教程点上检查相同的示例：https://www.tutorialspoint.com/react_native/react_native_text_input.htm

Answer 2

它可以通过两种方式完成。如果输入字段受到控制，则可以从状态本身获取值。如果输入字段不受控制（您的情况），您可以使用 refs 获取输入值

login() {
    console.log(this.refs.myInput.value)
}