Javascript 通过onClick-in-react从array.map检索数据

所以我有一个array.map按钮，它在一个api数据数组中循环。当我点击这个按钮时，我想获取特定的按钮数据，并将其存储在本地存储器中。我不知道如何通过谷歌做到这一点。有什么想法吗

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

{this.state.sb_headers.map（（header，index）=>(
{header.title}
))}

---

因此，在storeUrl函数中，我想从单击的链接中获取数据并存储它。例如，假设数组中有5个项目正在循环。每一个都有一个不同的URL。我想要单击的URL。

假设您映射的每个标题项都有一个名为“URL”的属性

链接组件的onClick将使用url参数调用storeUrl方法：

onClick={this.storeUrl(header.url)}

然后，您的storeUrl方法如下所示：

storeUrl(url) {
  return function() {
    // do something with url
  }
}

---

这是一个闭包，在单击链接之前不会调用返回的函数。

假设您映射的每个标题项都有一个名为“url”的属性

链接组件的onClick将使用url参数调用storeUrl方法：

onClick={this.storeUrl(header.url)}

然后，您的storeUrl方法如下所示：

storeUrl(url) {
  return function() {
    // do something with url
  }
}

这是一个闭包，在单击链接之前不会调用返回的函数。

最简单的解决方案（虽然不是最有效的）是为事件侦听器分配一个包装函数

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={() => this.storeUrl(header)}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

{this.state.sb_headers.map（（header，index）=>(
this.storeUrl（标题）}>
{header.title}
))}

您可以看到，我创建了一个fat arrow函数，该函数以header作为参数调用storeUrl。这将为每个渲染上的每个链接创建一个新函数。不是最优的，但它会成功的。另一种编写方法是将其作为返回函数的函数：

function storeUrl(header) {
  return function(e) {
    // This is the function that's called on click, it has access
    // to header via lexical scope
  }
}

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl(header)}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

函数存储URL（标题）{
返回函数（e）{
//这是单击时调用的函数，它具有访问权限
//通过词法作用域来定义标题
}
}
{this.state.sb_headers.map（（头，索引）=>(
{header.title}
))}

最后一个选项是将一些数据附加到可以通过单击事件检索的按钮

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl} data-index={index}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

// Your storeUrl method will receive e as an event
function storeUrl(e) {
  // Get more information about the click
  // The value will be a string so the + transforms it back to a number
  let index = +e.target.getAttribute('data-index');
  let header = this.state.sb_headers[index];

  // Whatever you were going to do with header
}

{this.state.sb_headers.map（（header，index）=>(
{header.title}
))}
//您的storeUrl方法将作为事件接收e
函数storeUrl（e）{
//获取有关单击的详细信息
//该值将是一个字符串，因此+将其转换回数字
让index=+e.target.getAttribute（'data-index'）；
让header=this.state.sb_headers[index]；
//不管你要怎么做
}

此解决方案的性能更高，因为它不会创建一堆额外的包装函数，但性能可以忽略不计，具体取决于应用程序的大小。

最简单的解决方案（虽然不是性能最高的）是将包装函数分配给事件侦听器

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={() => this.storeUrl(header)}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

{this.state.sb_headers.map（（header，index）=>(
this.storeUrl（标题）}>
{header.title}
))}

您可以看到，我创建了一个fat arrow函数，该函数以header作为参数调用storeUrl。这将为每个渲染上的每个链接创建一个新函数。不是最优的，但它会成功的。另一种编写方法是将其作为返回函数的函数：

function storeUrl(header) {
  return function(e) {
    // This is the function that's called on click, it has access
    // to header via lexical scope
  }
}

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl(header)}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

函数存储URL（标题）{
返回函数（e）{
//这是单击时调用的函数，它具有访问权限
//通过词法作用域来定义标题
}
}
{this.state.sb_headers.map（（头，索引）=>(
{header.title}
))}

最后一个选项是将一些数据附加到可以通过单击事件检索的按钮

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl} data-index={index}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

// Your storeUrl method will receive e as an event
function storeUrl(e) {
  // Get more information about the click
  // The value will be a string so the + transforms it back to a number
  let index = +e.target.getAttribute('data-index');
  let header = this.state.sb_headers[index];

  // Whatever you were going to do with header
}

{this.state.sb_headers.map（（header，index）=>(
{header.title}
))}
//您的storeUrl方法将作为事件接收e
函数storeUrl（e）{
//获取有关单击的详细信息
//该值将是一个字符串，因此+将其转换回数字
让index=+e.target.getAttribute（'data-index'）；
让header=this.state.sb_headers[index]；
//不管你要怎么做
}

---

此解决方案的性能更高，因为它不会创建一堆额外的包装函数，尽管性能可以忽略不计，这取决于应用程序的大小。

您可以这样做

This.storeUrl（url）

。只需将url传递给您的

this.storeUrl

函数。

onClick={（url）=>this.storeUrl（url）}

，一旦这样做，在storeUrl函数中，您可以将url存储在localStorage中。KSA是最接近的。对我有效的是onClick={}，并在其中添加了一个胖箭头函数，将header.url传递给函数，如：onClick={（）=>this.storeUrl（header.url）}。您可以这样做

this.storeUrl（url）

。只需将url传递给您的

this.storeUrl

函数。

onClick={（url）=>this.storeUrl（url）}

，一旦这样做，在storeUrl函数中，您可以将url存储在localStorage中。KSA是最接近的。对我有效的是onClick={}，并在其中添加了一个fat arrow函数，以便将header.url传递给函数，如：onClick={（）=>this.storeUrl（header.url）}。这不起作用，因为如果在react中使用onClick={functionexample（）}，在react中使用onClick={functionexample（）}，在单击时它需要（）加载时，storeUrl返回一个函数。单击链接后，该函数将被调用。尝试并在返回的函数中抛出一个console.log来测试它。这不起作用，因为如果在react中使用onClick={functionexample（）}，它会在react中加载时立即调用函数。要使单击工作，它需要（）不在那里。加载时storeUrl返回一个函数。单击链接后，该函数将被调用。尝试并在返回的函数中抛出一个console.log来测试它。