Question

我制作了一个按钮组件，该组件在我的父组件中呈现。现在卡住了一段时间，试图在我的父级中使用的此子组件的onPress事件上触发函数。

我一直在寻找一些推荐的问题和答案，但是我需要一些具体的建议。

我已尽可能简化了代码，请快速浏览。

谢谢！

// PARENT COMPONENT
export class Home extends Component {
  constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
 }

onPress = () => {
   console.log("Hey");
};


render() {
    return (
      <View style={styles.container}>
        <PrimaryButton text={"Sign up"} onPress={this.onPress} />
      </View>
    );
  }
 }



// CHILD COMPONENT
const PrimaryButton = ({ text }) => {
  return (
    <TouchableOpacity style={style.container} >
      <Text style={style.text}>{text}</Text>
    </TouchableOpacity>
  );
};

export default PrimaryButton;

Answer 1

您需要将onPress传递给TouchableOpacity作为道具。我不知道TouchableOpacity的道具，但应绑定为onPress或onClick。始终需要将事件处理程序传递给根组件（或尽可能接近的组件，即TouchableOpacity来自第三方）。大部分（如果不是全部）第三者组成部分都会有适当活动的道具。

// CHILD COMPONENT
const PrimaryButton = ({ text, onPress }) => {
  return (
    <TouchableOpacity style={style.container} onClick={onPress} >
      <Text style={style.text}>{text}</Text>
    </TouchableOpacity>
  );
};

在父组件内的子组件上触发onPress事件

1 个答案: