Javascript 响应调用父级'；什么也不发生

可能是一个简单的问题，有这么多人在这里回答，但在这种情况下，我不明白为什么它不起作用

在我的父母身上

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

<Child updateAccountNumber={this.updateAccountNumber} />

它甚至不会运行下面的代码，简单的代码，我不明白为什么它不会启动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();
  }
}

import React，{Component}来自“React”；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemText”导入ListItemText；
常量handleClick=（）=>{
调试器；
警报（“sda”）；
控制台日志（“bbb”）；
};
导出默认类RelatedSubAccounts扩展组件{
链接=（）=>{
if（此.props.RelatedSubAccounts）{
设RelatedSubArray=this.props.RelatedSubAccounts；
让source=RelatedSubArray.map（relatedSub=>(
));
返回(
{source}
);
}否则{
返回“”；
}
};
render（）{
返回此.Links（）；
}
}

---

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

我可以通过使用

相关子帐户获得一个与您共享的代码相关的示例，如下所示：

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




我发现有几件事可能会令人困惑。我将在下面的代码中用注释指出它们：

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

import React，{Component}来自“React”；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemText”导入ListItemText；
常量handleClick=（）=>{
调试器；
警报（“单击的相关子帐户”）；
控制台日志（“bbb”）；
};
导出默认类RelatedSubAccounts扩展组件{
//react中这样的大写通常表示一个组件
链接=（）=>{
/*
拥有一个与组件同名且大写的道具是令人困惑的
通常，道具不像组件那样大写，除非您将组件作为道具传递
*/
if（此.props.RelatedSubAccounts）{
//同样，RelatedSubArray的大小写暗示这是一个组件，而实际上它不是
设RelatedSubArray=this.props.RelatedSubAccounts；
让source=RelatedSubArray.map（relatedSub=>(
));
返回(
{source}
);
}否则{
返回“”；
}
};
render（）{
返回此.Links（）；
}
}
这将是最奇怪的解决方案，但可能会给你上一两堂课。。我在这里找到了问题的原因

我有这样的菜单

当您单击该箭头打开菜单时，它将变为活动状态，当您单击“模糊”时，该菜单将消失。。（菜单已创建使用反应选择可创建）

你能创建一个沙盒来处理代码并获得更多的见解吗？@RicardoGonzalez所以这个沙盒很好用。。。。我把它做得很简单，这样我就可以知道错误在哪里了。但是我的应用程序上的代码仍然不起作用。。我看不出有什么理由不这么做？？它所做的只是在同一个文档中运行handleClick，它不会运行它…你能展示一下你是如何使用相关子帐户的吗？@B Rob，谢谢你。。。那你为什么认为我的不行？它有
onClick={handleClick}
和
consthandleclick=（）=>{debugger；alert（“RelatedSubAccounts clicked”）；console.log（“bbb”）；}仍然不工作…谢谢你的例子，它工作得很好。当我在列表项上单击我的时，什么都没有发生…太奇怪了，我真的将你的整个文件粘贴到了我的项目中，当你单击该项时，什么都没有发生…即使我做了
console.log（“asd”）}
什么都没有发生。@B Rob，非常感谢，我终于明白了。
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();
  }
}

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

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

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

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