时间戳

首页 > 解决方案 > Typescript + React 从子组件调用父方法

reactjs - Typescript + React 从子组件调用父方法

问题描述

我试图从子组件调用父方法，但它不起作用并且父元素中的方法没有被触发。在这个例子中，我只有两个组件ChildHello调用组件中的方法Hello。

密码箱

你好.tsx

import * as React from "react";

interface Props {
  itemClicked: () => void;
}

export class Hello extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
  }

  itemClicked = val => {
    console.log(val);
  };

  render() {
    const { name } = this.props;
    return <h1 itemClicked={this.itemClicked}>{this.props.children}</h1>;
  }
}

const styles = {
  height: "400px"
};

export class ChildHello extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
  }

  render() {
    return (
      <div onClick={this.props.itemClicked} style={styles}>
        <Hello>Hello Child</Hello>
      </div>
    );
  }
}

标签： reactjstypescript

解决方案

您需要了解 childHello 中的父子关系，您正在使用单击事件。

 <div onClick={this.props.itemClicked} style={styles}>
        <Hello>Hello Child</Hello>
      </div>

childhello 由 index.jsx 页面调用

 <div style={styles}>
    <ChildHello name="CodeSandbox" />
  </div>

在这里，您没有传递任何点击事件。此外，hello 组件位于错误的子组件内。

所有父组件都应该包含 click 方法，并且该方法应该作为 props 传递。

像这样

家长：

<div style={styles}>
    <Hello name="CodeSandbox" />
  </div>

你好组件

render() {
    const { name } = this.props;
    return <ChildHello itemClicked={this.itemClicked} />;
  }

孩子你好

  render() {
    return (
      <div onClick={this.props.itemClicked} style={styles}>
        Hello
      </div>
    );
  }

沙盒演示

推荐阅读