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>
        )

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

提前感谢

Answer 1

首先像这样将index参数添加到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"} />

Answer 2

我不知道您确切想要实现什么，但是我建议您要将当前元素的索引传递给辅助函数回调。如果我没错，那么您的代码应如下所示：

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

如果您需要“索引的值”，则可以从辅助this.displayContent()方法中的索引中获取它，也可以像这样在回调内部获取它：

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

Answer 3

像@sebinq和@Abdelouahed一样，建议您可以这样编写按钮：

<Button onClick={(event) => this.displayContent(event, index)}
/>

但这意味着您已经将helper函数绑定到

这个

组件的[p]粗箭头功能的自然行为。

否则，如果您这样编写代码：

<button onClick={this.handleClick(event, index)}>Click Me!</button>

然后您可能需要将其添加到构造函数中

this.handleClick = this.handleClick.bind（this）

如此：

 constructor(props){
        super(props)
        this.state = {
            show: false,
        }
    this.handleClick = this.handleClick.bind(this)
     }

祝你好运！

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

3 个答案: