Question

我有5个可点击的链接，每个链接都有唯一的ID。我试图获取被点击的链接的ID。我尝试了两种方法，但都没有按照我的意愿工作。

内部渲染我有：

reply_click(clicked_id) {
  console.log(clicked_id);
}

返回undefined的基本方法。我做错了什么？：

CREATE TABLE vendors (

    vendor_id   INT UNSIGNED NOT NULL AUTO_INCREMENT,
    [...]
    created_at  TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

    PRIMARY KEY (vendor_id)
) ENGINE=InnoDB CHARACTER SET=utf8mb4;

CREATE TABLE vendor_orders (

    vendor_order_id  INT UNSIGNED NOT NULL AUTO_INCREMENT,
    vendor_id        INT UNSIGNED NOT NULL REFERENCES vendors(vendor_id),
    [...]
    created_at       TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at       DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

    PRIMARY KEY (vendor_order_id)
) ENGINE=InnoDB CHARACTER SET=utf8mb4;

Answer 1

使用箭头功能将从外部保持this的上下文，这不是您想要的this。您可以尝试使用常规函数（function () { }），但我不确定this是否符合您的要求。

但是，您可以使用e.target.id来获得您想要的内容：

onClick={e => this.reply_click(e.target.id)}

那就是说，你应该真的避免在内部创建函数，因为它可能会产生重大的性能问题。最好只创建一个函数并将其传递给：

// somewhere above
const handleClick = e => this.reply_click(e.target.id);

// attribute
onClick={handleClick}

Answer 2

你可以这样做

<a href={"/#/template"} id={dynamicData.id} onClick={() => this.reply_click(dynamicData.id)}>{dynamicData.name}</a>

或其他方式

<a href={"/#/template"} id={dynamicData.id} onClick={this.reply_click}>{dynamicData.name}</a>



reply_click(event) {
    console.log(event.target.getAttribute('id'))
}

Answer 3

this.reply_click(this.id)

this是您的组件范围，这意味着您在组件中定义的每个属性都可以由this访问。可能你没有在这个组件中定义id。

你可能想做

 this.reply_click(dynamicData.id)

代替。

Answer 4

箭头功能中的this与其外部的onclick相同。 this已经知道正确的onClick={this.reply_click(this.id)}，因此请按照以下方式使用：

{{1}}

Answer 5

试试这段代码。您提供的代码无效，因为this绑定到当前的React组件，而您可以使用id访问所点击元素的e.target.id：

this.state.data.map((dynamicData, key) => {
  <a href="/#/template" id={dynamicData.id} onClick={(e) => this.reply_click(e.target.id)}>{dynamicData.name}</a>
  <a href="/#/addTeams"><button type="button" class="btn-lisa">Edit</button></a>
})

不相关，但我仍然要注意，您不必使用<a href={"blah"}，而是可以使用<a href="blah"，因为最后一个使用了字符串。

反应获取点击按钮的ID

5 个答案: