如何在 React 中获取特定映射文件的“名称”属性？答案

【问题标题】：How to get "name" attribute of a specific mapped file in React?如何在 React 中获取特定映射文件的“名称”属性？
【发布时间】：2020-12-18 09:09:20
【问题描述】：

这是嵌入的 JSX 代码：

<Col>
  <h2> Found Files </h2>
  {this.state.foundFiles.map(files => (
   <div className = "file-box-search" key={files}>
     <input type = "checkbox" name = {files.id}></input> 
     <p className = ""> <a href = {files.click}> {files.file} </a> </p>
     <p> {files.description}</p>
   </div>
  ))}
 </Col>

只是为了清楚这里发生了什么：

this.state.foundFiles 是一个数组对象，其中包含我正在映射的文件，这些文件的值例如 id 和 file。一个示例如下所示：

{
  file: 'lesson 1',
  id: '1qupvie1LqNdLj-1TZNu3x6-4bT411C4F2YYGSfpc7yk',
  description: undefined,
  type: 'application/vnd.google-apps.document',
  properties: { subject: 'math', grade: 'pre-k' },
  parents: [ '1kAzxwEgX5ftI-Sa4nUDK1Y5rJOSJ6VrU' ]
},

.map() 循环遍历这个数组，并根据数组中每个文件的值给出几个不同格式的 div。

在这个 .map() 方法中有一个复选框。当复选框被选中时，我想调用一个函数，该函数可以在 map 方法中使用该特定复选框的 name 属性。我不能只以 id 为目标，因为这样方法中的每个元素都将具有完全相同的 id。

最好的方法是什么？

【问题讨论】：

不是每个文件 id 都是唯一的吗？假设他们是这似乎不是问题
是和不是。因为您不能为从地图返回的每个值设置唯一的文件 ID。在这里的 map 方法中，假设我给 p 元素一个 id 为“fileD”。如果这个映射只返回一个带有这些参数的值，那很好，如果我说“fileD”，任何外部函数都会知道我的意思。由于它返回了几个不同的对象，每个对象都有一个“fileD”的 id，这意味着我不能针对特定的返回结果。对于这个问题，我试图从特定返回结果的复选框中获取 name 属性。 @charlietfl
我的意思是像1qupvie1LqNdLj-1TZNu3x6-4bT411C4F2YYGSfpc7yk 这样显示的值......使用它和Array#find()，您可以在数组中获得具有id 的对象。将其传递给您的 onChange 事件处理程序调用
或者因为你使用它作为名称，所以也使用event.target.name搜索数组以匹配对象中的id
明白了。我会试着把它放在一起。

标签： javascript reactjs methods

【解决方案1】：

That's where我建议用索引定义一些常量值：

.map((files, index) => {
  // ${`checkbox-${index}-${files.id}`}

【讨论】：

那么在这种情况下我将如何使用它呢？你能告诉我一个在外部函数中使用 name 值的例子吗？