从子组件调用父函数不起作用

时间:2019-05-03 03:01:30

标签: react-native react-redux jsx

我有2个组件的父级(LoginScreen)和一个子级(SignupSection)。子组件具有onClick按钮。当用户单击按钮时,我需要从父组件中触发功能,这对我不起作用。我有以下代码

我想从子组件中调用父函数

父母

import React, {Component} from 'react';
import Wallpaper from './Wallpaper';
import SignupSection from './SignupSection';

export default class LoginScreen extends Component {
   constructor(props) {
     super(props)
   }

   childcall()
   {
     alert("hello , this call from child component");
   }

   render() {
     return (
      <Wallpaper>
      <SignupSection 
        childcall ={this.childcall.bind(this)} 
      />
      </Wallpaper>
      );
    }
   }

孩子

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, Text} from 'react-native';


export default class SignupSection extends Component {
    constructor(props) {
       super(props)
    }
    componentWillMount()
    {

    }

    render() {
       return (
          <View style={styles.container}>
            <Text style={styles.text}  onClick={()=>this.props.childcall()}>Create Account</Text>
           <Text style={styles.text}>Forgot Password?</Text>
          </View>
       );
    }
 }

1 个答案:

答案 0 :(得分:0)

文本没有onClick。只有onPress,或者您应该将文本组件包装在TouchableOpacity内,然后在onPress内调用回调函数

修复:

return (
         <View style={styles.container}>
            <Text style={styles.text}  onPress={()=>this.props.childCall()}>Create Account</Text>
           <Text style={styles.text}>Forgot Password?</Text>
          </View>
       );