javascript - 在react js中单击映射数组获取索引

Question

class DataCard extends React.Component {
constructor(props){
    super(props)
    this.state = {
        show: false,
    }

   }

displayContent = (e) => {
    e.preventDefault();
    console.log(e.target.entry);
}
render() {
    console.log(this.props.content,'Data');
    const emailItems = this.props.content.map((email,index) =>{
        return(
            <div key={email.id} className="data-container" >
            <div className="button-card">
                <div className="button__block"></div>
                <div className="button__block"></div>
                <div className="button__block card_block">
                    <div className="data-card-avatar">
                        <ul>
                            <li>
                                <i onClick={this.msgRead} className= . 
      {this.state.show ? "fa fa-envelope" : "fa fa-envelope-open"}></i>
                                <span>count</span>
                            </li>
                            <li>
                                <img />
                            </li>
                            <li>test</li>
                        </ul>
                    </div>
                    <div className="data-card-data">
                        <ul className="email-content-header">
                            <li>To: {email.To}</li>
                            <li>sender : {email.Sender}</li>
                            <li>Date: {email.Email_Date}</li>
                        </ul>
                        <div className="email-sub-header">
                            sub: {email.Subject}
                        </div>
                        <div className="email-con-body">{email.Subject}      
          </div>
                        <Button onClick={this.displayContent}  variant= 
 .                 {"button-data-card-div"} entry={index} content= . 
 {"More"} />
                    </div>
                </div>
            </div>
        </div >
        )
    })
    if (this.props.content.length === 0) {
        return (
            <Loader />
        )
    } else {
        return (
            <div>{emailItems}</div>
        )

先生，我如何在点击时获取映射数组的索引
当我在 map 中执行 console.log 时，我能够得到它，它提供了所有索引。但我需要一个函数，这样当我点击它时它应该给出被点击的索引的值请检查上面的代码并告诉我是否有什么我可以做的

提前致谢

Answer 1

首先像这样将索引参数添加到您的 displayContent 函数

displayContent(e, index){
    e.preventDefault();
    console.log(e.target.entry, index); 
}

然后在要触发该功能的按钮上添加 onClick 属性，如下所示:

<Button onClick={(e)=>this.displayContent(e,index)} variant= {"button-data-card-div"} entry={index} content={"More"} />