"如何在反应js中的array.map上的事件onclick上添加功能"

Question

class ProjectFirestoreData extends Component {
    constructor(props) {
        super(props);
        this.userDelete = this.userDelete.bind(this)
    }
    userDelete(authorId){
        console.log(authorId)
    }
    render() {
        let {firestore} = this.props;
        if(!Array.isArray(firestore) || !firestore.length ){
            return (
                    <div>
                        <h1>Loading</h1>
                    </div>
                )
        }
        else{
            return (
                    <div className="col-md-8">
                        <div className="row">
                            {
                                firestore.map(function(index, elem) {
                                    return (
                                        <div className="col-md-6 p-3" key={index.name}  >
                                            <div className="card">
                                              <img className="card-img-top" src="..." alt="Card" />
                                              <div className="card-body">
                                                <h5 className="card-title text-dark">AuthorName is :  {index.authorFirstName} </h5>
                                                <p className="card-text text-dark">Some quick example text to build on the card title and make up the bulk of the card's content.
                                                </p>
                                                <Link to={`/userdetails/${index.authorId}`} className="btn btn-primary">Show Full Data</Link>
                                                <button type="button" class="btn btn-dark" onClick={() => this.userDelete(index.authorId)}>Dark</button>
                                              </div>
                                            </div>
                                        </div>

                                        )
                                })
                            }


                        </div>
                    </div>
                )
        }
    }

}

Answer 1

By passing a regular function to the map you lose the this context (a regular functions' this referrers to the current function), and since your userDelete function is outside of the map callback function userDelete is undefined, if you change the map callback function to an arrow function you retain the this scope of the class therefore userDelete is still in scope.

Change firestore.map(function(index, elem) { to firestore.map((index, elem) => { this should keep the proper this scope.

Answer 2

onclick event inside map---------------   working fine for me
 <div className={styles.file_content_show}>
                            {this.state.fileinformation.map((item)=>{ 
                                    return (
                                      
                                      <p className={styles.file_name_show}>{item.file_name}
                                      <span className={styles.file_size_date}> ({item.file_size} | {item.file_modified_date}) <img src={attachmentdelete_logo} className={styles.attachmentdelete_logo} onClick={this.deleteattachment.bind(item.file_size)}/></span>
                                      </p>
                                    );    
                                    
                                  })}
                                 
                                  
                                </div>
    
    
    
    
    function is this-------------------
      @autobind
      private deleteattachment(file){
        var a=file;
      }