Как использовать onClick в react.js?

Как использовать событие onClick или любое другое подобное событие?

import mycomponent from './path'    

class App extends React.Component{

    render()
    {
      <mycomponent onClick = {console.info("Click"}/>
    }
}

Как дать mycomponent событие onClick?

import React from 'react'
const mycomponent = () =>{<p>Click Me</p>}

export default mycomponent

javascript reactjs

14.08.2018 04:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Props - это первое значение, передаваемое в компонент реакции на основе функции:

import React from 'react'
const mycomponent = (props) =>{<p onClick = {props.onClick}>Click Me</p>}

export default mycomponent

И в вашем компоненте приложения:

import mycomponent from './path'    

class App extends React.Component{

    render()
    {
      <mycomponent onClick = {() => console.info("Click"}/>
    }
}

вам нужно специально использовать .onClick?

— 14.08.2018 04:16

@ joseph.e Убедитесь, что onClick - это функция. () => console.info("Click");

— 14.08.2018 04:54

14.08.2018 04:13

Ответ принят как подходящий

Стоит отметить две вещи:

вы можете захватывать click (или другие события) только на элементах DOM. Если вы хотите зафиксировать событие click в своем пользовательском компоненте, вам необходимо делегировать его элементу DOM внутри компонента.
то, что вы передаете в onClick, должно быть функцией. Здесь вы передаете результат вызова этой функции в onClick (console.info('Click') - это вызов функции, а не функция).

Вот рабочий пример:

const MyComponent = (props) => (<p onClick = {props.click}>Click Me</p>)


class App extends React.Component {
  click () {
    alert('clicked')
  }
  render() {
    return (
    <div>
      Provide a function to click event: <MyComponent click = {this.click} />
      Provide an anonymous function to click event: <MyComponent click = {() => alert('yes')} />

    </div>
      
      
    )
  }
}



ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id = "container">
</div>

Также обратите внимание, что эта строчка const mycomponent = () =>{<p>Click Me</p>} должна быть

const mycomponent = () => <p>Click Me</p>

Если вы добавите фигурные скобки, вам нужно будет явно вернуть это значение.

14.08.2018 04:39