React Native undefined不是一个对象(评估' this.onPressButton.bind')

时间:2017-02-20 09:21:23

标签: reactjs react-native navigation native

因此" onPress = {this.onPressButton.bind(this)}"导致我的申请失败?

我该怎么做才能解决它。我认为它与(这)变得无法结合或某事有关吗?

我有一个名为Login的组件正在呈现:

export default class Login extends Component {

constructor(props) {
    super(props);
    this.state = {
        id:'login'
    }
}

render() {
    return(
        <KeyboardAvoidingView behavior="padding" style={style.container}>
            <View style={style.logoContainer}>
                <StatusBar barStyle="light-content" />
                <Image style={style.logo} source={require('../../image/Octocat.png')} />
                <Text style={style.logoText}> A Github app using React Native by{"\n"} Thomas Charlesworth</Text>
            </View>
            <View style={style.formContainer}>
                <LoginForm />
            </View>
        </KeyboardAvoidingView>
    );
}
}

登录表单组件:

export default class LoginForm extends Component {

onPressButton(){
    this.props.navigator.push({
        id: 'splash',
        passProps: {
        // Your Props
        }
    })
}

render() {
    return(
        <View style={style.container}>
            <TextInput 
                style={style.input} 
                placeholder="Username" 
                placeholderTextColor="rgba(255,255,255,0.5)"
                returnKeyType="next"
                autoCapitalize="none"
                autoCorrect={false}
                onSubmitEditing={()=> this.passwordInput.focus()}
            />
            <TextInput 
                style={style.input} 
                secureTextEntry 
                placeholder="Password" 
                placeholderTextColor="rgba(255,255,255,0.5)"
                returnKeyType="go"
                ref={(input) => this.passwordInput = input}
            />
            <TouchableOpacity 
                style={style.buttonContainer}
                onPress={this.onPressButton.bind(this)}
            > 
                <Text style={style.buttonText}>
                    LOGIN
                </Text>
            </TouchableOpacity>
        </View>
    );
}
}

1 个答案:

答案 0 :(得分:1)

像这样写:

从父组件传递函数:

<LoginForm update={this.update.bind(this)}>

navigate(data){
    this.props.navigator.push({data});
}

在儿童部分:

onPressButton(){
    let data = {
        /*data*/
    }
    this.props.navigate(data);
}