如何在 Native React 中调用子函数中的父函数

Question

花了几个小时在谷歌上搜索却没有找到答案......我正在寻求你的帮助。

所以我想做的是：在子级中调用名为 _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 };
    });
  }
}

儿童

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

绑定不起作用。也不通过 props 传递函数...

感谢您的帮助和时间！

Answer 1

帮助理解

在孩子的内心。

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

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

这是有效的（通过子函数）

  lol() {
    alert('lol');
  }

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

Answer 2

在 Child 组件中，您应该调用 this.props.myMethod 而不是 this.myMethod。
示例：

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

在您的父母中，您应该将道具传递给孩子 - myMethod={this._toggleSearchBar}。
示例：

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

请注意，您应该将_toggleSearchBar 绑定到class。
在constructor做吧：

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