使用 React 处理的 onClick 创建锚点

Question

我有一个 React 组件，它呈现 <ul> 并根据状态插入 <li> 元素。

class SimpleComponent extends React.Component {
  constructor(props) {
    this.state = { menu_items: [name: "First", id: 10] }
    this.clickMenu = this.clickMenu.bind(this)
  }
  generateLinks() {
    let to_return='';
    for (var i=0;i<this.state.menu_items.length; i++) {
      to_return = to_return + `<li><a onclick={clickMenu}> ${this.state.menu_item[i]['name']} </a></li>`
     }
     return to_return;
   }
   clickMenu(e) {
     console.log(e.target)
   }
   render() {
     return(
       <ul dangerouslySetInnerHTML={this.generateLinks()}></ul>
     )
   }
}

当我点击锚点时，控制台显示 Uncaught ReferenceError: clickMenu not defined。我试过使用 this.clickMenu 代替，但没有任何反应。我注意到呈现的锚点看起来像：

<a onclick="{menuClick}">

有没有一种方法可以创建这些锚元素，让 React 获取 onClick 定义，而不是将它们传递给浏览器进行解释？

Answer 1

使用 React，您应该构建组件和子组件，而不是编写长 HTML 字符串。你基本上破坏了 React 的使用模式，这正是你使用的属性包含单词 "dangerously".

的原因

下面是实现该列表的一种方法：

class SimpleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { menu_items: [{ name: "First", id: 10 }] };
    this.clickMenu = this.clickMenu.bind(this);
  }
  clickMenu(id) {
    console.log(id);
  }
  render() {
    var items = this.state.menu_items.map(item => {
      let handleClick = () => {
        this.clickMenu(item.id);
      };
      return (
        <li key={item.id}>
          <a onClick={handleClick}>
            {item.name}
          </a>
        </li>
      );
    });
    return <ul>{items}</ul>;
  }
}

我正在通过映射 state.menu_items 构建一个包含 <li> 个元素的数组。由于当状态发生变化时组件会被重新渲染，这将始终根据当前状态进行更新state（并且只进行实际必要的更改，这是 React 的定义特征之一）。

另请注意，您的构造函数缺少 super(props) 调用，并且您的状态数组的单个元素未包含在花括号中。

使用 React 处理的 onClick 创建锚点

Creating anchor with onClick that React handles

javascript

reactjs

onclick

anchor

react-class-based-component