clickHandler в компоненте без гражданства?

Question

Я React noobie, и я пытаюсь создать простую (повторно используемую) кнопку назад назад, используя компонент без гражданства, но я не уверен, как включить/куда положить clickHandler. Нужно ли использовать компонент с состоянием? Это мое нерабочее приближение к тому, что я пытаюсь сделать.

import React from 'react'; 

const BtnBack =() => (
    <button className="btn btn-back" onClick={this.handleClick}>BACK</button> 
); 

handleClick() { 
    // history back code 
}; 

export default BtnBack; 

Answer 1

Вы пишете объект/класс как код за пределами объекта или класса. Просто думаю, что этот код, как нормальный JavaScript:

import React from 'react'; 

const YourButton =() => (
    <button onClick={yourFunction}>BACK</button> 
) 

function yourFunction(event) { 
    console.log('hello there') 
} 

Вы также можете INLINE эту функцию, если вы хотите, чтобы передать больше аргументов по:

const YourButton =() => (
    <button onClick={event => yourFunction(event, 'foo', 'bar')}>BACK</button> 
) 

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

const YourButton = props => (
    <button onClick={props.yourFunction}>BACK</button> 
) 

Также вы говорите «в константной», но вы можете использовать let или var, если вы хотите, или даже экспортировать его непосредственно.