Question

我有一个带有onPress()事件处理程序的子图标元素：

render() {
  return (
    <TouchableOpacity onPress={this.props.press}>
  )
}

这个孩子的IconWrapper父组件传递了按下功能：

render() {
  return (
    <View>
      <Icon press={this.props.press} />
      <Icon press={this.props.press} />
      <Icon press={this.props.press} />
    </View>
  )
}

然后，我将使用以下内容从祖父母渲染父IconWrapper组件：

render() {
  return (
    <View>
      <IconWrapper press={this.press} />
    </View>
  )
}

IconWrapper press功能不向下传播到Icon。我相信我需要将此函数附加到外部View组件，然后使用View作为参考，例如：

render() {
  return (
    <View ref="outerView" press={this.props.press}>
      <Icon press={this.refs.outerView.press} />
      <Icon press={this.refs.outerView.press} />
      <Icon press={this.refs.outerView.press} />
    </View>
  )
}

或者也许：

render() {
  return (
    <View ref="outerView">
      <Icon press={this.refs.outerView.props.press} />
      <Icon press={this.refs.outerView.props.press} />
      <Icon press={this.refs.outerView.props.press} />
    </View>
  )
}

我如何在render（）块中引用父事件处理程序？

Answer 1

在IconWrapper中将类的引用绑定到函数。这应该无需使用refs。

render() {
  return (
    <View>
      <IconWrapper press={this.press.bind(this)} />
    </View>
  )
}

在render（）块中引用父级的事件处理程序

1 个答案: