javascript - Creating anchor with onClick that React handles - Stack Overflow

admin管理员组

文章数量:1289830

I have a React Component that renders a <ul> and inserts <li> elements based on state.

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

When I click on the Anchor, the console indicates Uncaught ReferenceError: clickMenu not defined. I've tried using this.clickMenu instead, but nothing occurs. I've noticed that the rendered anchor looks like:

<a onclick="{menuClick}">

Is there a way to create these anchor elements to have React pick up the onClick definitions rather than passing them to the browser to interpret?

I have a React Component that renders a <ul> and inserts <li> elements based on state.

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

When I click on the Anchor, the console indicates Uncaught ReferenceError: clickMenu not defined. I've tried using this.clickMenu instead, but nothing occurs. I've noticed that the rendered anchor looks like:

<a onclick="{menuClick}">

Is there a way to create these anchor elements to have React pick up the onClick definitions rather than passing them to the browser to interpret?

• javascript
• reactjs
• onclick
• anchor
• react-class-based-ponent

Share Improve this question Follow edited May 26, 2020 at 11:42 Zach 75511 gold badge1010 silver badges2929 bronze badges asked Dec 20, 2017 at 0:28 Andy GaugeAndy Gauge 1,42822 gold badges1414 silver badges2626 bronze badges 3

• Why not take clickMenu out of generateLinks and make it its own prototype element? Then you can just use it as this.clickMenu – Andrew Commented Dec 20, 2017 at 0:36
• I'm trying to generate an achor that calls this.clickMenu when clicked. clickMenu I believe that means it is a prototype element. I can't figure out what exactly a prototype element is though. – Andy Gauge Commented Dec 20, 2017 at 0:55
• Sorry about the confusing verbage. I wanted to be as technical as possible. When I say prototype element I mean "class method". JavaScript doesn't have real classes, so it's fundamentally incorrect to refer to it as such. – Andrew Commented Dec 20, 2017 at 0:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

With React you're supposed to build ponents and subponents, not pose long HTML strings. You're basically undermining React's usage pattern, which is precisely the reason why the attribute you're using contains the word "dangerously".

Here's one way how to implement that list:

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

I'm building an array of <li> elements by mapping state.menu_items. Since the ponent is re-rendered when state changes occur, this will always update according to the current state (and only make changes that are actually necessary, which is one of React's defining characteristics).

Also note that your constructor was missing the super(props) call, and your state array's single element wasn't wrapped in curly braces.

本文标签： javascriptCreating anchor with onClick that React handlesStack Overflow