Блог

Главная - Вопросы по программированию - onClick не запускается в React

onClick не запускается в React

#javascript #reactjs

#javascript #reactjs

Вопрос:

Щелчок, похоже, не запускает console.log().

 import React from 'react';

import './SearchResult.scss';

const searchResult = props => {
    const listItemClicked = () => {
        console.log('hi');
    };

    return (
        <li key={props.resultName} className="result-list" onClick={() => listItemClicked()}>
            <div className="result">
                <p>{props.resultName[0].toUpperCase()   props.resultName.slice(1)}</p>
            </div>
        </li>
    );
};

export default searchResu<

Может быть, это был долгий день, но я просто не могу заставить onClick запустить console.log…

Заранее спасибо.

Комментарии:

1. В зависимости от вашего кода, console.log() должно срабатывать при нажатии на li

2. @ErtanHasani Я так и думал, это что-то настолько простое, но по какой-то странной причине я просто не могу заставить его сработать…

3. Попробуйте перезапустить свой компилятор. Это часто помогает, когда вы на 100% уверены, что что-то должно сработать.

4. как сказал @ErtanHasani, ваш код должен срабатывать console.log() при нажатии li (я только что протестировал его), может быть, вы фильтруете свой журнал?

5. Разве вы не получаете консольное предупреждение от React? Компоненты должны начинаться с заглавных букв…

Ответ №1:

Добавьте реквизиты по умолчанию в приведенный выше код.

Код будет выглядеть:

 import React from 'react';
import './SearchResult.scss';

const SearchResult = props => {
    const listItemClicked = () => {
         console.log('hi');
    };

    return (
         <li key={props.resultName} className="result-list" onClick={() =>listItemClicked()}>
            <div className="result">
               <p>{props.resultName[0].toUpperCase()   props.resultName.slice(1)}</p>
            </div>
        </li>
    );
};

SearchResult.defaultProps = {
  resultName:["abc","xyz"]
}

export default SearchResult;
Метки: