Question

假设我有这个自定义组件：

tkinter

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

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

出于某种原因（至少我不知道），这个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中的道具，我传给它一个函数（'（）=＆gt; this.doSomething'），稍后会在Button的onPress中激活。 / p>

Answer 2

尼克的答案是正确的。此外，如果您想为子组件和父组件调用单独的函数，则可以使用onPressOut。这将有助于管理组件状态

export default class Button extends Component {
  constructor(props){
    super(props)
  }

onClickListen = () => {
        if (this.state.isSelected === false) {
            this.setState({isSelected:true});
            isSelectedPass=true;
        }
        else {
            this.setState({isSelected:false});
            isSelectedPass=false;

        }
    }

  render(){
    return(
      <TouchableOpacity
      onPress={this.props.onPress} onPressOut={this.onClickListen}
      >
        <Text> Button </Text>
      </TouchableOpacity>
    )
  }
}

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

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

2 个答案: