Looping in React, wie bekomme ich einen prop.username von der Kindkomponente

Question

Ich habe diesen Code, der einen Freundeslistenblock rendert. Neben dem Namen gibt es ein Aktions-Dropdown-Menü, wo es mehrere Buttons gibt, ich muss jeden Button trennen und zu welchem ​​User gehört er. Bisher funktioniert es, aber alle Benutzernamen werden nacheinander ausgegeben. Überprüfen Sie im Dropdown-Menü die onClick-Warnung. Wenn ich den href drücke, passiert nichts, wenn jedoch neuer Inhalt geladen wird, wird der Alarm für jeden Benutzer angezeigt.

var UserDropdownActions = React.createClass({ 
    handlesendMessage: function(username){ 
    console.log(username); 
    }, 
    render: function() { 
    return(
    <div className="tbl-cell tbl-cell-action"> 
      <div className="btn-group"> 
       <button type="button" className="btn btn-rounded btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Connect 
       </button> 
       <ul className="dropdown-menu"> 
       <li><a className="dropdown-item" href="javascript:;" onClick={alert(this.props.username)}><span className="font-icon font-icon-home"></span>Quant and Verbal</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-cart"></span>Real Gmat Test</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-speed"></span>Prep Official App</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-users"></span>CATprer Test</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-comments"></span>Third Party Test</a></li> 
       </ul> 
      </div> 
     </div> 
     ); 
    } 
}) 
var UserDisplayNameFields = React.createClass({ 
    render: function(){ 
    return(
     <div className="tbl-cell"> 
      <p className="user-card-row-name status-online">{this.props.username}</p> 
      <p className="user-card-row-location">{this.props.hobby}</p> 
     </div> 
    ); 
    } 
}); 
var UserPreviewCircularImage = React.createClass({ 
    render: function(){ 
    return(
     <div className="tbl-cell tbl-cell-photo thumbnail-wrapper d32 circular inline m-t-5"> 
     <a href={"/user/" + this.props.username}> 
      <img src={this.props.avatar} alt={this.props.username} /> 
     </a> 
     </div> 
    ); 
    } 
}); 

var UserSmallView = React.createClass({ 
    render: function() { 
    return (
     <div className="friends-list-item"> 
      <div className={"user-card-row user_" + this.props.username}> 
      <div className="tbl-row"> 
       <UserPreviewCircularImage avatar={this.props.avatar} username={this.props.username} /> 
       <UserDisplayNameFields username={this.props.username} hobby={this.props.hobby} /> 
       <UserDropdownActions username={this.props.username} /> 
      </div> 
      </div> 
     </div> 
    ); 
    } 
}); 

var FriendList = React.createClass({ 
    render: function() { 

    return ( 
    <div className="friends-list"> 
    { 
     this.props.users.map((user, i) => { 
     return(
     <UserSmallView 
      key={i} 
      username={user.username} 
      hobby={user.hobby} 
      avatar={user.avatar} /> 
     ) 
     }) 
    } 
    </div> 
    ); 
    } 
}); 

Answer 1

Mein Fehler war, dass ich versuchte, an die Funktion den Benutzernamen zu senden, obwohl es schon da war.

Ich habe eine Funktion, wo sie alarmiert den prop.username

handlesendMessage: function(){ 
    alert(this.props.username); 
}, 

statt,

handlesendMessage: function(username){ 
    alert(username); 
}