Question

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

所以我想做的事情：在Child中调用名为_toggleSearchBar（）的函数（在父元素中），这样当onPress事件（在子元素中）触发时，它会更改值＆＃39; isVisible＆＃ 39;在父母内部。

父

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

Bind没有工作。也不通过道具传递功能......

感谢您的帮助和时间！

Answer 1

在儿童组件中，您应该调用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);
}

Answer 2

帮助完成

孩子内心。

这不起作用（通过父功能）

<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>

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

2 个答案: