Question

我希望你能解决我的问题。我无法理解，为什么我的<ListItem>示例中的property rightIconButton不起作用（Material UI组件）。

<List>

import React from 'react';
import { List } from 'material-ui';
import UsersItem from './UsersItem';

class UsersList extends React.Component {
  render() {
    return <List>
             {this.props.users.map(user => {
               return <UsersItem key={user.id} deleteUser={this.props.deleteUser} 
                                 user={user}/>
             })}
    </List>;
  }
}

export default UsersList;

<ListItem>

import React from 'react';
import { ListItem, IconButton, Avatar, FontIcon } from 'material-ui';

class UsersItem extends React.Component {
  constructor() {
    super();
    this.deleteUser = this.deleteUser.bind(this);
  }

  deleteUser(e) {
    this.props.deleteUser(this.props.user.id);
    e.stopPropagation();
  }


  render() {
    let deleteButton = <IconButton iconClassName="icomoon-icon-delete"
                            onClick={this.deleteUser}>
                        </IconButton>;

    return  <ListItem className="user-item" secondaryText={this.props.user.description}
                      leftAvatar={<Avatar src="./web/images/avatar.jpg" />} 
                      rightIconButton={deleteButton} secondaryTextLines={2}>
            tt { this.props.user.name }
            </ListItem>
  }
}

export default UsersItem;

字体图标是正确的，如果我将其放在<Toolbar>上，则呈现正确。但它并没有在property rightIconButton中呈现。我也从MaterialUI的官方网站上的源代码中尝试了SVG图标。结果网站页面的屏幕截图（第三个链接的小信誉）https://github.com/jestonedev/Auction/blob/master/issue.png

我做错了什么？为什么rightIconButton不起作用？

Answer 1

在deleteButton＆gt; onClick，你缺少绑定这个上下文：

onClick={this.deleteUser.bind(this)}

使用es6类语法时，这是必要的。

ReactJS + MaterialUI。财产权IconButton不起作用

1 个答案: