ボタン反応でリストをマッピングしているときに 'this'問題が発生しました

Question

GETリクエストの結果をマッピングしています。マッピングは正常に動作します。私は各ユーザーの画像、名前、さらには正しいラベルをボタンに表示します。しかし、私がconsole.logボタンの上に、私はそのユーザーの情報を取得したいと思います。ボタンをクリックすると、特定のユーザー以外のすべてのユーザーのuser_idが表示されます。上の写真で

{filteredEmails.map(user => { 
    return (
    <List> 
     <div className="mail" key={user.user_id}> 
     <ListItem 
      key={user.user_id} 
      disabled={true} 
      leftAvatar={ 
      <Avatar size={80} src={user.picture} /> 
      } 
      rightIconButton={ 
      <RaisedButton 
       label={user.name} 
       primary={true} 
       key={user.user_id} 
       onTouchTap={console.log(user.user_id)} 
       style={style} /> 
      } 
     > 
      <div className="searchContent" key={user.user_id}> 
      <div className="subject">{user.name}</div> 
      <br></br> 
      <div className="from">{user.email}</div> 
      <br></br> 
      <div className="subject">{user.identities[0].provider}</div> 
      </div> 
     </ListItem> 
     </div> 
    </List> 
); 
})} 

Mapping users picture

、私はボタンを押すと、ユーザーのuser_idやnameを取得したいです。私はそうすることはできない。

私の推測はthisの文脈では問題ですが、これまでのところ解決できません。

Answer 1

イベントにonTouchTapイベントに関数を渡し、user_idの値をバインドする必要があります。これは、特定のuser_idがその関数に渡されるボタンをユーザがクリックするたびに、console.log()を印刷します。適切な値。

onTouchTap={() => this._handleClick(user.user_id)} 

このような_handleClick機能を定義します：このように

あなたはまた、map内の各リスト項目に固有キーを定義する必要が

_handleClick(user_id){ 
    console.log(user.user_id) 
} 

を、それ以外の場合は警告、user_idの意志をスローしますあなたはそれを使うことができるユニークな価値を持っています。

は、このような mapを書く：応答のための

{filteredEmails.map(user => { 
    return (
     <List key={user.user_id}> 
      <div className="mail"> 
       <ListItem 
        key={user.user_id} 
        disabled={true} 
        leftAvatar={ 
         <Avatar size={80} src={user.picture} /> 
        } 
        rightIconButton={<RaisedButton 
          label={user.name} 
          primary={true} 
          key={user.user_id} 
          onTouchTap={onTouchTap={() => this._handleClick(user.user_id)}} 
          style={style} /> 
        } 
       > 
        <div className="searchContent" key={user.user_id}> 
         <div className="subject">{user.name}</div> 
         <br></br> 
         <div className="from">{user.email}</div> 
         <br></br> 
         <div className="subject">{user.identities[0].provider}</div> 
        </div> 
       </ListItem> 
      </div> 
     </List> 
    ); 
})}