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>
    );
}