javascript - TextInput onChangeText 无法正常工作 React Native

Question

我是这个平台的新手，这是我在这个平台上的第二天。我试图通过创建简单的登录、注册、新闻提要应用程序来自学它。我能够构建登录页面，但是在从 InputText 获取值时，它显示错误消息“不能同时指定值和子项”，我在这里发布我的 login.js 类

export default class LoginScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
    }
    login = () => {
        alert(this.state.username + " " + this.state.password);
    }
    render() {
        return (
            <View style={styles.container}>

                <Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
                    <View style={styles.content}>
                        <Image source={require('../images/logo.png')} style={styles.logo}>
                        </Image>

                        <View style={styles.inputcontainer}>

                            <TextInput underLineColorAndroid='transparent' style={styles.input} value={this.state.username} onChangeText={(username) => this.setState({ username })} placeholderText='username' > </TextInput>

                            <TextInput secureTextEntry={true} underLineColorAndroid='transparent' style={styles.input} value={this.state.password} onChangeText={(password) => this.setState({ password })} placeholderText='password' placeholderTextColor='black'> </TextInput>

                        </View>
                        <TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
                            <Text style={styles.buttonText}>LOGIN</Text>
                        </TouchableOpacity>
                    </View>
                </Image>
            </View>
        );
    }
}

请让我知道我的代码哪里出错了

问候

Answer 1

你能试试这个吗

export default class LoginScreen extends Component {

constructor(props) {
    super(props);
    this.state = {username: '',password: ''};
}
login = () => {
    alert(this.state.username + " " + this.state.password);
}
render() {
    return (
        <View style={styles.container}>
            <Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
                <View style={styles.content}>
                    <Image source={require('../images/logo.png')} style={styles.logo}>
                    </Image>
                    <View style={styles.inputcontainer}>
                        <TextInput 
                        underLineColorAndroid='transparent' 
                        style={styles.input} 
                        value={this.state.username} 
                        onChangeText={(text) => this.setState({ username: text })} 
                        placeholderText='username'/>

                        <TextInput 
                        secureTextEntry={true} 
                        underLineColorAndroid='transparent' 
                        style={styles.input} 
                        value={this.state.password} 
                        onChangeText={(text) => this.setState({ password:text })} 
                        placeholderText='password' 
                        placeholderTextColor='black'/>
                    </View>
                    <TouchableOpacity onPress={this.login()} style={styles.buttonContainer}>
                        <Text style={styles.buttonText}>LOGIN</Text>
                    </TouchableOpacity>
                </View>
            </Image>
        </View>
    );
}