Question

我正在尝试使用包含按钮的listItem创建一个简单列表。我有以下代码：

document.getElementsByTagName()

我在列表成功调用onMouseDown函数之前插入的按钮，但listItem中包含的按钮失败。我似乎无法弄清楚为什么会发生这种情况以及我如何使listItem中的按钮工作。

我想知道是否有人就如何解决这个问题提出建议？示例代码非常棒！

Answer 1

好的，所以我可以通过将onMouseDown更改为onTouchTap来解决这个问题。我不认为这是Floating Action Button docs的财产，所以如果有人有更好的解决方案，我很乐意听到。

Answer 2

我还是React的新手，所以我不知道这是不是正确的样式，但我发现由于元素是一个函数，你可以将处理程序作为参数传入。如果你有多个参数，我想你会传入'props'或'this'而不是'handleOnMouseDown'。

const iconButtonElement = (handleOnMouseDown) => {
      render <FloatingActionButton mini={true} onMouseDown={handleOnMouseDown}>
        <ContentAdd />
      </FloatingActionButton>

}

这是我的代码，对我有用

const iconButtonElement = (handleTouchTap) => {
  return <IconButton
    touch={true}
    tooltip="star"
    tooltipPosition="bottom-left"
    onTouchTap={handleTouchTap}
  >
    <ToggleStarHalf color={yellow700} />
  </IconButton>
}

class PersonItem extends Component {
  constructor(props, context) {
    super(props, context);
  }

  handleUpdateStar() {
    console.log('handleUpdateStar');
  }

  handleClick() {
    console.log('handleClick');
  }

  render() {    
    const { person } = this.props;
    return (
      <div>
        <ListItem
          onTouchTap={this.handleClick.bind(this)}
          leftAvatar={
            <img 
              alt={person.name}
              src={this.thumb(person.image)}
              className="face"
            />
          }
          rightIconButton={iconButtonElement(this.handleUpdateStar.bind(this))}
          primaryText={person.name}
          secondaryText={person.desc}
          secondaryTextLines={2}
        />
        <Divider inset={false} />
      </div>
    );
  }
}

具有浮动操作按钮的材质UI ListItem

2 个答案: