Javascript React中的列表查询

我是React的初学者，有一个基本的问题。请参阅下面的代码，我想在单击任何人的名字时在浏览器控制台上打印数组的索引

App.js

import React, { Component } from 'react';
import './App.css';
import Para from './Para/Para';


class App extends Component {

state = {
  persons : ['Max', 'Nick', 'Peter']
}

clickHandler= (index) =>{
  console.log(`CLICKED ${index}`);
}


  render() {

    var members = [];
    this.state.persons.forEach((element,index)=>{
      members.push(<Para clicked= {this.clickHandler.bind(this,index)} name={element} key={element}></Para>);
    })

    return (
     <div>
      {members}
     </div>
    );

  }
}
export default App;

import React from 'react';

const para = (props) =>{
   return( <p onClick = {props.clicked}>{props.name}</p>)
}

export default para;

import React，{Component}来自'React'；
导入“/App.css”；
从“./Para/Para”导入Para；
类应用程序扩展组件{
状态={
人员：['Max'、'Nick'、'Peter']
}
clickHandler=（索引）=>{
log（`CLICKED${index}`）；
}
render（）{
var成员=[]；
this.state.persons.forEach（（元素，索引）=>{
成员：push（）；
})
返回(
{成员}
);
}
}
导出默认应用程序；

功能组件-第js段

import React, { Component } from 'react';
import './App.css';
import Para from './Para/Para';


class App extends Component {

state = {
  persons : ['Max', 'Nick', 'Peter']
}

clickHandler= (index) =>{
  console.log(`CLICKED ${index}`);
}


  render() {

    var members = [];
    this.state.persons.forEach((element,index)=>{
      members.push(<Para clicked= {this.clickHandler.bind(this,index)} name={element} key={element}></Para>);
    })

    return (
     <div>
      {members}
     </div>
    );

  }
}
export default App;

import React from 'react';

const para = (props) =>{
   return( <p onClick = {props.clicked}>{props.name}</p>)
}

export default para;

从“React”导入React；
常量参数=（道具）=>{
返回（
{props.name}
）
}
出口违约款；

我收到了预期的输出。我这里的问题是，当单击时，react如何在数组中找到人名的索引？因为当页面被加载时，所有的组件都被呈现，当元素（人名）被点击时，react会重新呈现这个功能组件来找到索引吗。。？幕后到底发生了什么？

---

提前谢谢

为了解释它是如何工作的，

this.clickHandler.bind（this，index）

返回一个函数-逻辑上等同于

（…args）=>clickHandler（index，…args）

---

FWIW:

onClick

事件处理程序的内置属性始终以

event

作为第一个参数调用，因此传递其他参数的惯用方法是使用工厂/闭包变量，例如：

makeClickHandler = (index) => (event) => { console.log(`CLICKED ${index}`) }
...<Para clicked={makeClickHandler(index)}...

makeClickHandler=（索引）=>（事件）=>{console.log（`CLICKED${index}`）}
为了解释它是如何工作的，
this.clickHandler.bind（this，index）
返回一个函数-逻辑上等同于
（…args）=>clickHandler（index，…args）


FWIW:
onClick
事件处理程序的内置属性始终以
event
作为第一个参数调用，因此传递其他参数的惯用方法是使用工厂/闭包变量，例如：

makeClickHandler = (index) => (event) => { console.log(`CLICKED ${index}`) }
...<Para clicked={makeClickHandler(index)}...

makeClickHandler=（索引）=>（事件）=>{console.log（`CLICKED${index}`）}
在数组中循环，在每个元素上都可以访问它的索引。
（这只是JS功能，不是React，检查）

因此，您可以“分配”一个带有特定参数（索引）的函数作为属性。
您基本上是说“这个独特的元素在单击时运行
clickHandler（1）
”。另一个“运行
clickHandler（2）
”等

当您将多个div分配给
成员时，您将呈现它。在您的代码中，没有任何内容得到更新，因为状态保持不变。
您在数组中循环，并且在每个元素上都可以访问它的索引。
（这只是JS功能，不是React，检查）

因此，您可以“分配”一个带有特定参数（索引）的函数作为属性。
您基本上是说“这个独特的元素在单击时运行
clickHandler（1）
”。另一个“运行
clickHandler（2）
”等

当您将多个div分配给
成员时，您将呈现它。在您的代码中，没有任何内容得到更新，因为状态保持不变。
React没有找到索引，而是提供了一个索引
{this.clickHandler.bind（this，index）
在传递时检查此项。@Justcode感谢您的评论。因此，绑定必须在单击鼠标右键时进行。那么，react如何知道索引值，因为组件已在页面加载时呈现。我认为react在这方面没有做任何事，它只传递绑定时传递的索引。每个循环项都被视为separate元素。只是一个提示，最好不要将事件处理程序添加到非交互元素。如果这是一个交互元素，则可以从
event.target.value
中获取值。对于我的意思，
中的表达式单击={expression}
立即执行==在每次渲染期间绑定
索引
，比较
单击={console.log（'before clicked'）}
vs
单击={（）=>console.log（'before clicked'）}
React没有找到索引，您给出的是一个索引
{this.clickHandler.bind（this，index）
在传递时检查此项。@Justcode感谢您的评论。因此，绑定必须在单击鼠标右键时进行。那么，react如何知道索引值，因为组件已在页面加载时呈现。我认为react在这方面没有做任何事，它只传递绑定时传递的索引。每个循环项都被视为separate元素。只是一个提示，最好不要将事件处理程序添加到非交互元素。如果这是一个交互元素，则可以从
event.target.value
中获取值。对于我的意思，
中的表达式单击={expression}
立即执行==在每次渲染期间绑定
索引
，比较
clicked={console.log（'before clicked'）}
vs
clicked={（）=>console.log（'before clicked'）}