Reactjs 如何让onClick在嵌套的React组件中工作？

更新：我的代码检查出来很好。问题是在一个单独的Javascript库中调用了stopPropagation（），这阻止了我的onclick工作

--

我有一个“MenuLink”react组件，其中我将onClick侦听器添加到了一个“a”标记中。“MenuLink”组件是从“主菜单”组件导入的“MenuItem”组件导入的（见下文）

当我点击从MenuLink生成的链接时，什么也没发生。没有错误，什么都没有。我希望在我的控制台中看到“handleClick”，并阻止链接执行

MenuLink.js

class MenuLink extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = props.link;
  }

  handleClick(e) {
    console.log("handleClick");
    e.preventDefault();
  }

  render() {
    const link = this.state;

    return (
      <a
        href={link.alias}
        onClick={this.handleClick}
      >
        {link.title}
      </a>
    );
  }
}

export default MenuLink;

import MenuLink from './MenuLink.js';

class MenuItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.item;
  }

  render(key) {
    const item = this.state;

    return(
      <li
        key={key}
      >
        <MenuLink
          link={item}
        />

      </li>
    );
  }
}

export default MenuItem;

import MenuItem from '../components/MenuItem.js';

class MainMenu extends React.Component {
  state = {
    menu: []
  }

  render() {
    return(
      <ul className="menu">
        {this.state.menu.map(function(menuItem, i) {
          return(
            <MenuItem key={i} item={menuItem} />
          )
        })}
      </ul>
    );
  }

  componentDidMount() {
    fetch('/api/menu_items/main')
    .then(res => res.json())
    .then((data) => {
      this.setState({ menu: data })
    })
    .catch(console.log)
  }
}

export default MainMenu;

类MenuLink扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.state=props.link；
}
handleClick（e）{
控制台日志（“handleClick”）；
e、 预防默认值（）；
}
render（）{
const link=this.state；
返回(
);
}
}
导出默认菜单链接；

MenuItem.js

class MenuLink extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = props.link;
  }

  handleClick(e) {
    console.log("handleClick");
    e.preventDefault();
  }

  render() {
    const link = this.state;

    return (
      <a
        href={link.alias}
        onClick={this.handleClick}
      >
        {link.title}
      </a>
    );
  }
}

export default MenuLink;

import MenuLink from './MenuLink.js';

class MenuItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.item;
  }

  render(key) {
    const item = this.state;

    return(
      <li
        key={key}
      >
        <MenuLink
          link={item}
        />

      </li>
    );
  }
}

export default MenuItem;

import MenuItem from '../components/MenuItem.js';

class MainMenu extends React.Component {
  state = {
    menu: []
  }

  render() {
    return(
      <ul className="menu">
        {this.state.menu.map(function(menuItem, i) {
          return(
            <MenuItem key={i} item={menuItem} />
          )
        })}
      </ul>
    );
  }

  componentDidMount() {
    fetch('/api/menu_items/main')
    .then(res => res.json())
    .then((data) => {
      this.setState({ menu: data })
    })
    .catch(console.log)
  }
}

export default MainMenu;

从“/MenuLink.js”导入MenuLink；
类MenuItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state=props.item；
}
渲染（关键点）{
const item=this.state；
返回(


);
}
}
导出默认菜单项；

main menu.js

class MenuLink extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = props.link;
  }

  handleClick(e) {
    console.log("handleClick");
    e.preventDefault();
  }

  render() {
    const link = this.state;

    return (
      <a
        href={link.alias}
        onClick={this.handleClick}
      >
        {link.title}
      </a>
    );
  }
}

export default MenuLink;

import MenuLink from './MenuLink.js';

class MenuItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.item;
  }

  render(key) {
    const item = this.state;

    return(
      <li
        key={key}
      >
        <MenuLink
          link={item}
        />

      </li>
    );
  }
}

export default MenuItem;

import MenuItem from '../components/MenuItem.js';

class MainMenu extends React.Component {
  state = {
    menu: []
  }

  render() {
    return(
      <ul className="menu">
        {this.state.menu.map(function(menuItem, i) {
          return(
            <MenuItem key={i} item={menuItem} />
          )
        })}
      </ul>
    );
  }

  componentDidMount() {
    fetch('/api/menu_items/main')
    .then(res => res.json())
    .then((data) => {
      this.setState({ menu: data })
    })
    .catch(console.log)
  }
}

export default MainMenu;

从“../components/MenuItem.js”导入菜单项；
类主菜单扩展了React.Component{
状态={
菜单：[]
}
render（）{
返回(

{this.state.menu.map（函数（menuItem，i）{
返回(
)
})}

);
}
componentDidMount（）{
获取（'/api/menu\u items/main'）
.then（res=>res.json（））
。然后（（数据）=>{
this.setState（{menu:data}）
})
.catch（console.log）
}
}
导出默认主菜单；

下面的代码片段显示它确实按预期工作。没有进行任何更改

类MenuLink扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.state=props.link；
}
handleClick（e）{
控制台日志（“handleClick”）；
e、 预防默认值（）；
}
render（）{
const link=this.state；
返回(
);
}
}
类MenuItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state=props.item；
}
渲染（关键点）{
const item=this.state；
console.log（key）//未定义。不要这样做
返回(


);
}
}
类主菜单扩展了React.Component{
状态={
菜单：[{
别名：“测试”，
标题：“测试”
},
{
别名：“test2”，
标题：“test2”
}]
}
render（）{
返回(

{this.state.menu.map（函数（menuItem，i）{
返回(
)
})}

);
}
}
ReactDOM.render（，document.getElementById（'root'））

---

请检查此示例：

import React from "react";

class MenuLink extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        // this.state = props.link;
        this.state = {
            link: {alias: "http://www.google.com", title: 'Google'}
        }
    }

    handleClick(e) {
        console.log("handleClick");
        e.preventDefault();
    }

    render() {

        const link = this.state.link;

        return (
            <div>
                <a
                    href={link.alias}
                    onClick={this.handleClick}
                >
                    {link.title}
                </a>
            </div>
        );
    }
}

export default MenuLink;

从“React”导入React；
类MenuLink扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
//this.state=props.link；
此.state={
链接：{别名：http://www.google.com，标题：'谷歌'}
}
}
handleClick（e）{
控制台日志（“handleClick”）；
e、 预防默认值（）；
}
render（）{
const link=this.state.link；
返回(
);
}
}
导出默认菜单链接；

这种方法应该有效

class MenuLink extends React.Component {
  constructor(props) {
    super(props);
    //this.handleClick = this.handleClick.bind(this);
    this.state = props.link;
  }

  handleClick = e => {
    console.log("handleClick");
    e.preventDefault(); 
  }

  render() {
    const link = this.state;

    return (
      <a
        href={link.alias}
        onClick={this.handleClick}
      >
        {link.title}
      </a>
    );
  }
}

export default MenuLink;

类MenuLink扩展了React.Component{
建造师（道具）{
超级（道具）；
//this.handleClick=this.handleClick.bind（this）；
this.state=props.link；
}
handleClick=e=>{
控制台日志（“handleClick”）；
e、 预防默认值（）；
}
render（）{
const link=this.state；
返回(
);
}
}
导出默认菜单链接；

谢谢你，布莱恩。您认为我的MenuLink组件包含在另一个组件中重要吗？这就是为什么它对我不起作用的原因吗？不确定，我想这是可能的。你看到链接了吗？我看到了链接，但onClick什么也没做。我可以在您的代码片段中看到它工作得很好。谢谢你添加这一点。在这一点上，我将开始调试其他地方。例如确保应用程序已重建（假设您使用的是webpack、CRA或其他形式的捆绑）。控制台记录所有地方，并遵循流程，查看是否有任何异常。删除

onClick

处理程序，查看它是否会更改页面。但是我们已经排除了这段代码中存在的问题，所以我正在处理的项目的主题中有一些JS，它有一个stopPropagation（）方法，阻止了我的onclick工作。(╯°□°)╯︵ ┻━┻确实，他们不需要将函数绑定到

this

，但不调用

preventDefault（）

将导致页面更改，这正是他们试图避免的。然而，这两件事都没有真正有助于解决这个问题。