Function 如何在本机React中调用子函数中的父函数

在花了几个小时在谷歌上搜索而没有找到答案后。。。我请求你的帮助

所以我想做的是：在子对象中调用名为_toggleSearchBar（）的函数（位于父对象中），这样当onPress事件（位于子对象中）触发时，它会更改父对象中的值“isVisible”

家长

class HomeScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {isVisible: false};
  }

  static navigationOptions = {
    title: 'P O S T E R',
    headerStyle: { backgroundColor: '#CECECE' },
    headerTitleStyle: { color: 'black', fontSize: 30, fontFamily: 'HelveticaNeue-CondensedBlack'},
    headerRight: <DisplayIcon src={require('./ressources/icon_search.png')} myMethod={'HERE'}/>,
    headerLeft: <DisplayIcon src={require('./ressources/icon_aroundMe.png')}/>,
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
          <View style={styles.bck}>
          <ScrollView>
            <DisplayImage src={require('./ressources/logo.jpg')} />
            <DisplayImage src={require('./ressources/logo1.jpeg')} />
            <DisplayImage src={require('./ressources/logo2.jpg')} />
            <DisplayImage src={require('./ressources/logo3.jpeg')} />
            <DisplayImage src={require('./ressources/logo4.jpg')} />
            <DisplayImage src={require('./ressources/logo5.jpeg')} />
            <DisplayImage src={require('./ressources/bde.jpeg')} />
          </ScrollView>
        </View>
        <Display enable={this.state.isVisible} style={styles.ViewIn}>
          <View>
            <TextInput style={styles.textIn}></TextInput>
          </View>
        </Display>
      </View>
    )
  }
  _toggleSearchBar() {
    this.setState(previousState => {
      return { isVisible: !this.state.isVisible };
    });
  }
}

类主屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isVisible:false}；
}
静态导航选项={
标题：'P O S T E R'，
headerStyle:{背景颜色：'#CECECE'}，
headerTitleStyle:{颜色：'黑色'，字体大小：30，字体系列：'黑色'，
头灯：，
头左：，
};
render（）{
const{navigate}=this.props.navigation；
返回(
)
}
_切换搜索栏（）{
this.setState（previousState=>{
返回{isVisible:！this.state.isVisible}；
});
}
}

儿童

class DisplayIcon extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TouchableHighlight onPress={this.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' }>
        <Image style={styles.Picture} source={this.props.src}/>
      </TouchableHighlight>
    );
  }
}

const styles = StyleSheet.create({
  Picture: {
    marginLeft: 10,
    marginRight: 10,
    height: 30,
    width: 30,
  }
});

类显示图标扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
图片：{
边缘左：10，
marginRight:10，
身高：30，
宽度：30，
}
});

Bind不起作用。也不是通过道具传递函数

---

谢谢你的帮助和时间

在子组件中，您应该调用

this.props.myMethod

而不是

this.myMethod

例如：

<TouchableHighlight onPress={this.props.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' }>

<DisplayIcon src={require('./ressources/icon_search.png')} myMethod={this._toggleSearchBar}/>

请注意，您应该将

\u切换搜索栏

绑定到

类

在

构造函数中执行此操作：

constructor(props){
  super(props);
  this._toggleSearchBar = this._toggleSearchBar.bind(this);
}

理解帮助

在孩子体内

这不起作用（通过父函数）



请不要发布代码的图像。将您的代码直接添加到问题中，以便帮助人员帮助您。好的，my Bad DisplayIcon组件位于层次结构中的何处？因为我在主屏幕上看到的只是显示图像。DisplayImage和DisplayIcon是同一个组件吗？没有错误，但没有显示预期的内容。我猜我的代码错了，所以我将函数改为alert（'azert'）。。。仍然没有错误，但我在单击时没有传递函数，因为警报没有显示