Question

给出两个组件，一个仅是react-bootstrap ListGroup的呈现，另一个是包含console.log打印输出的函数，当在listgroup项中使用onClick时，看到该打印输出会遇到麻烦。我正在构建音乐播放器，并且列表组包含要单击的歌曲。

当我尝试从ListGroupItem中删除<Player Player = />时，它成为一个span元素而不是一个按钮。我可以从div内打印console.log，但是我要使用handleClick函数来开始进行歌曲切换，并且由于该函数被列为未定义，所以我有点卡住了。

在player.js（包含实际的音乐播放器组件）中

  handleClick = (e) => {
    e.preventDefault();
    console.log('hello');
  }

在Songlist.js中

class Songlist extends Component {
  constructor(props) {
    super(props);
  }
 Songlist = () => {
    return(
       <div className="listgroup">
        <ListGroup>
          <ListGroupItem onClick=<Player Player = {this.handleClick} />>
          button text goes here
          </ListGroupItem >
          //more list group items go here
         </ListGroup>
        </div>
          );
        }


 render() {
    return (
      <div className="Songlist">
      {this.Songlist()}
      </div>
    );
  }
}

export default Songlist;

我得到的实际错误消息是“错误：预期onClick侦听器是一个函数，而得到的值为object类型。”但是，由于我使用的是箭头函数，因此不需要绑定任何东西，而且我很确定这是将函数传递给onClick侦听器的语法吗？

Answer 1

您需要执行以下操作，因为onClicks需要功能，而不是您提供的对象。

 <ListGroupItem onClick=<Player Player = {this.handleClick} />>

应该成为

 <ListGroupItem onClick={() => <Player Player = {this.handleClick} />}>

通过带有React-Bootstrap ListGroup的onClick触发功能

1 个答案: