Javascript 反应：从单击的链接获取属性

我有一个react标签，它接受url属性并将输出转换为链接。单击该链接后，我会创建一个引导模式，询问用户是否要继续。我有一个for循环，为不同的链接创建多个标签，它会显示带有url的链接。单击任意URL也会打开一个模式框，其中包含一些信息，但“我的模式”上的“继续”按钮始终链接到第一个元素。下面是一段视频，展示了它的实际应用：

下面是ExternalUrl标记的代码：

import React, { Component, Fragment } from 'react';
import {tu} from "../../utils/i18n";

class ExternalUrl extends Component {
render() {
 return (
  <div>
    <a href="#" data-toggle="modal" data-target="#ExternalUrlWarning">{this.props.url}</a>

    <div class="modal fade" id="ExternalUrlWarning" tabindex="-1" role="dialog" aria-labelledby="ExternalUrlWarning" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="ExternalUrlWarningLabel">External Link</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {tu("The link")} <b> {this.props.url} </b> {tu("is not a verified site and therefore may not be secure. Proceed at your own risk.")} 
          </div>
          <div class="modal-footer">
            <a class="btn btn-warning" href={this.props.url} target="_blank">{tu("Proceed")}</a>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">{tu("Cancel")}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  );
 }
}

export default ExternalUrl;

witnesses.map((account, index) => (
            <tr key={account.address}>
              <td><ExternalUrl url={account.url}></ExternalUrl></td>
            </tr>
          ))

import React，{Component，Fragment}来自'React'；
从“./../utils/i18n”导入{tu}”；
类ExternalUrl扩展组件{
render（）{
返回(
外部链接
&时代；
{tu（“链接”）}{this.props.url}{tu（“不是经过验证的站点，因此可能不安全。请自行承担风险。”）
{tu（“取消”）}
);
}
}
导出默认外部URL；

下面是使用ExternalUrl标记的代码：

import React, { Component, Fragment } from 'react';
import {tu} from "../../utils/i18n";

class ExternalUrl extends Component {
render() {
 return (
  <div>
    <a href="#" data-toggle="modal" data-target="#ExternalUrlWarning">{this.props.url}</a>

    <div class="modal fade" id="ExternalUrlWarning" tabindex="-1" role="dialog" aria-labelledby="ExternalUrlWarning" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="ExternalUrlWarningLabel">External Link</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {tu("The link")} <b> {this.props.url} </b> {tu("is not a verified site and therefore may not be secure. Proceed at your own risk.")} 
          </div>
          <div class="modal-footer">
            <a class="btn btn-warning" href={this.props.url} target="_blank">{tu("Proceed")}</a>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">{tu("Cancel")}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  );
 }
}

export default ExternalUrl;

witnesses.map((account, index) => (
            <tr key={account.address}>
              <td><ExternalUrl url={account.url}></ExternalUrl></td>
            </tr>
          ))

witness.map（（账户、索引）=>(
))

为元素创建一个点击处理程序并传递URL

witnesses.map((account, index) => (
  <tr key={account.address} onClick={() => this.handleClick(account.url)}>
    <td><ExternalUrl url={account.url}></ExternalUrl></td>
  </tr>
))

...

handleClick(url) {
    console.log('url', url)
    // handle your modal state here
}

witness.map（（账户、索引）=>(
this.handleClick（account.url）}>
))
...
handleClick（url）{
console.log（'url'，url）
//在这里处理你的模态状态
}

您正在

ExternalUrl

组件中使用

id=“ExternalUrlWarning”

您正在循环见证并生成多个ExternalUrl组件。但是所有modals的id都是相同的（ExternalUrlWarning）

像这样将索引传递给ExternalUrl组件

witnesses.map((account, index) => (
        <tr key={account.address}>
          <td><ExternalUrl url={account.url} index={index}></ExternalUrl></td>
        </tr>
      ))

witness.map（（账户、索引）=>(
))

并使用它来构造模态的id

<a href="#" data-toggle="modal" data-target={"#ExternalUrlWarning_"+this.props.index}>{this.props.url}</a>

<div class="modal fade" id={"ExternalUrlWarning_"+this.props.index} tabindex="-1" role="dialog" aria-labelledby="ExternalUrlWarning" aria-hidden="true">

---

工作起来很有魅力。非常感谢。