'this' 使用按钮 reactjs 映射列表时出现问题

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 函数：

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

您还需要为 map 中的每个列表项定义唯一键，否则会引发警告，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>
    );
})}

'this' 使用按钮 reactjs 映射列表时出现问题

'this' issue while mapping a List with button reactjs

javascript

this

ecmascript-6

reactjs

material-ui