Question

一个简单的问题，有很多人在这里回答，但是在这种情况下，我无法弄清楚为什么它不起作用...

我在父母那里

     updateAccountNumber = value => {
        console.log(value);
      };

<Child updateAccountNumber={this.updateAccountNumber} />

我有个孩子

<ListItem
          button
          key={relatedSub.office + relatedSub.account}
          onClick={() =>
            this.props.updateAccountNumber(
              relatedSub.office + relatedSub.account
            )
          }

即使我像这样做父母，也仍然没有帮助。

 <Child updateAccountNumber={() => this.updateAccountNumber()} />

如果我有下面的子项，那么当我单击运行这些子项的菜单时，该组件会自行调用尽可能多的项...

 onClick={this.props.updateAccountNumber(
        relatedSub.office + relatedSub.account
      )}

它甚至不会运行下面的代码，简单的代码，我看不出为什么它不会处理handleClick事件...

import React, { Component } from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const handleClick = () => {
  debugger;
  alert("sda");
  console.log("bbb");
};

export default class RelatedSubAccounts extends Component {
  Links = () => {
    if (this.props.RelatedSubAccounts) {
      let RelatedSubArray = this.props.RelatedSubAccounts;
      let source = RelatedSubArray.map(relatedSub => (
        <ListItem
          button
          onClick={handleClick}
          key={relatedSub.office + relatedSub.account}
          className={
            relatedSub.office + relatedSub.account !== this.props.OfficeAccount
              ? ""
              : "CurrentRelatedSub"
          }
        >
          <ListItemText primary={relatedSub.office + relatedSub.account} />
        </ListItem>
      ));

      return (
        <div id="RelatedSubLinks">
          <List>{source}</List>
        </div>
      );
    } else {
      return "";
    }
  };

  render() {
    return this.Links();
  }
}

请询问是否缺少任何其他相关代码，我可以分享。

Answer 1

我能够通过使用RelatedSubAccounts来获得一个与您共享的代码一起使用的示例，

<RelatedSubAccounts RelatedSubAccounts={[{ office: 1, account: 2 }]} />

Code Sandbox Example

我认为有些事情可能会引起混淆。我将在下面的代码中用注释指出它们：

import React, { Component } from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const handleClick = () => {
  debugger;
  alert("RelatedSubAccounts clicked");
  console.log("bbb");
};

export default class RelatedSubAccounts extends Component {
  // Capitalization like this in react normally indicates a component
  Links = () => {
    /*
      Having a prop that is the same name as the component and capitalized is confusing
      In general, props aren't capitalized like the component unless you are passing a component as a prop    
    */
    if (this.props.RelatedSubAccounts) {
      // Again, capitalization on RelatedSubArray hints that this is a component when it really isn't
      let RelatedSubArray = this.props.RelatedSubAccounts;
      let source = RelatedSubArray.map(relatedSub => (
        <ListItem
          button
          onClick={handleClick}
          key={relatedSub.office + relatedSub.account}
          className={
            relatedSub.office + relatedSub.account !== this.props.OfficeAccount
              ? ""
              : "CurrentRelatedSub"
          }
        >
          <ListItemText primary={relatedSub.office + relatedSub.account} />
        </ListItem>
      ));

      return (
        <div id="RelatedSubLinks">
          <List>{source}</List>
        </div>
      );
    } else {
      return "";
    }
  };

  render() {
    return this.Links();
  }
}

Answer 2

这将是最奇怪的解决方案，但可能会给您一个或两个教训。.我在这里找到了问题的起因。

所以我有一个像这样的菜单

当您单击该箭头以打开菜单时，该菜单将变为活动状态，而当您单击on时，Blur将弹出，菜单将消失。。（创建的菜单使用react-select Creatable）

  DropdownIndicator = props => {
    return (
      <div
        onBlur={() => {
          this.setState({ Focused: false, RelatedSub: false });
        }}

所以我不得不将其更新为以下内容：

onBlur={() => {
      this.setState({ Focused: false });
      setTimeout(() => {
        this.setState({ RelatedSub: false });
      }, 100);
    }}

反应调用父级方法没有任何反应

2 个答案: