Question

我正在尝试从子组件中调用父方法，但是它不起作用，并且不会触发父元素中的方法。在此示例中，我只有两个组件，其中ChildHello调用Hello组件中的方法。

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>
    );
  }
}

Answer 1

您需要了解亲子关系在childHello中，您正在使用click事件。

 <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} />;
  }

ChildHello

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

Sandbox demo

来自子组件的Typescript + React调用父方法

1 个答案: