Не понимаю, почему событие onclick не запускается

Question

Мне подарили галерею с изображениями.На каждом изображении есть 3 иконки, которые должны действовать при нажатии на них.Я пытаюсь активировать событие onclick для изображений-значков, но ничего не происходит.Изображения-иконки создаются в функции рендера с font-awsome.Я новичок в JavaScript.

Я пытался найти другие вопросы здесь на сайте, но ни одно из решений не помогло мне.

функция, которую я хочу активировать:

setNewSize() {

    const size = 500
    this.setState({
            size
        });

  }

проблема здесь:

 render() {
   return (
     <div
       className="image-root"
       style={{
         backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
         width: this.state.size + 'px',
         height: this.state.size + 'px'
       }}
       >
       <div>

         <FontAwesome className="image-icon" name="clone" title="clone"/>  
         <FontAwesome className="image-icon" name="filter" title="filter" />
         <FontAwesome className="image-icon" name="expand" title="expand" onclick={ this.setNewSize} />
       </div>


     </div>
   );
 }


}

Answer 1

Проблема в onclick={ this.setNewSize}

В реакции Это должно быть onClick , изменить следующим образом;

Обработка событий в React аналогична обработке событийв HTML, но есть несколько ключевых отличий:

1. События React называются с помощью camelCase, а события HTML часто упоминаются с использованием строчных букв
2. В JSX вы передаете функцию какобработчик событий, а не имя функции (строка)
3. Невозможно вернуть false, чтобы предотвратить поведение по умолчанию при реагировании.Вместо этого вам следует вызвать e.preventDefault ();

надеюсь, что это поможет, и не забудьте связать методы.

Answer 2

React использует соглашение CamelCase, поэтому вы должны поместить onClick={this.setNewSize} вместо onclick={this.setNewSize}.Это работает для вас?

Answer 3

Есть несколько вещей, которые вам нужно знать

1. FontAwesome - это настраиваемый компонент реакции, написанный вами или используемый из библиотеки

2. Атрибуты, передаваемые пользовательскому компоненту реакции, передаются компоненту в качестве реквизитов, и если они не используются внутри компонента и не передаются элементам DOM, они не будут иметь никакого эффекта. Чтобы узнать больше об этом чеке этот пост

   3.Вы должны связать методы либо в конструкторе, либо с помощью функции стрелки, чтобы правильно использовать this в нем.

Чтобы решить вышеупомянутую проблему, вам нужно проверить документацию компонента, если вы используете его из библиотеки, и посмотреть, что нужно для обработки события onClick. По всей вероятности, в случае верблюда это будет onClick.

Если вы написали компонент самостоятельно, убедитесь, что вы следуете инструкциям, указанным в сообщении, для решения проблемы, т.е. передать опору как элемент DOM.

Answer 4

Вы должны использовать onClick, но также не забудьте связать setNewSize, вы можете сделать это тремя способами

1. onclick={ this.setNewSize.bind(this)}

2 constructor(props) { super(props); this.setNewSize = this.setNewSize.bind(this); } 3. const setNewSize = () => {....}