javascript - 使用 React-Bootstrap ListGroup 通过 onClick 触发函数

Question

给定两个组件，一个只是 react-bootstrap ListGroup 的呈现器，另一个是包含 console.log 打印输出的函数，我在列表组项目中使用 onClick 时遇到了打印输出的问题。我正在构建一个音乐播放器，列表组包含要点击的歌曲。

当我尝试删除 <Player Player = /> 时从 ListGroupItem 开始，它变成了一个 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 类型的值。”但是因为我使用的是箭头函数，所以不需要绑定(bind)任何内容，而且我很确定这是将函数传递给 onClick 监听器的语法，不是吗？

Answer 1

您需要执行以下操作，因为 onClick 需要一个函数，而不是您提供给它的对象。

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

应该变成

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