Запуск функции через onClick с помощью React-Bootstrap ListGroup - PullRequest
Новая
       4

Запуск функции через onClick с помощью React-Bootstrap ListGroup

0 голосов
/ 31 января 2019

Учитывая два компонента, один из которых является просто рендерингом группы физической реакции-загрузки, а другой - функцией, содержащей распечатку console.log, у меня возникают проблемы с отображением этой распечатки при использовании onClick в элементе списка.Я создаю музыкальный проигрыватель, и группа списка содержит песни, по которым можно щелкнуть.

Когда я пытаюсь удалить <Player Player = /> из ListGroupItem, он становится элементом span вместо кнопки.Я мог напечатать console.log из div, но я собирался использовать функцию handleClick, чтобы начать работу по переключению песни, и, поскольку функция указана как неопределенная, я как бы застрял.

В проигрывателе.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 нет?

1 Ответ

0 голосов
/ 31 января 2019

Вам нужно сделать следующее, потому что onClicks ожидает функцию, а не объект, который вы ей даете. 

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

должно стать 

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