如何在自定义组件上使用onPress？

Question

我们假设我有这个自定义组件:

export default class Button extends Component {
  render(){
    return(
      <TouchOpacity>
        <Text> Button </Text>
      </TouchOpacity>
    )
  }
}

我在像这样的父组件中使用它:

export default class MainPage extends Component {
  render(){
    return(
      <Button onPress={ this.doSomething }></Button>
    )
  }
}

出于某种原因(至少我不知道),这个onPress甚至不会发生.我很反应原生btw.我相信我必须找到一种方法来启用这种事件处理.

是否有可能根据我上面的例子得到一个小例子如何实现它？

Answer 1

所以,刚刚发现了如何处理这个问题.

export default class Button extends Component {
  constructor(props){
    super(props)
  }
  render(){
    return(
      <TouchableOpacity
      onPress={this.props.onPress}
      >
        <Text> Button </Text>
      </TouchableOpacity>
    )
  }
}

和

export default class MainPage extends Component {
  render(){
    return(
      <Button onPress={ ()=>this.doSomething }></Button>
    )
  }
}

简短说明:由于onPress我传递的是MainPage中的道具,我传给它一个函数('()=> this.doSomething'),稍后会在Button的onPress中激活.