无状态组件中的clickHandler？

【问题标题】：clickHandler in stateless component?无状态组件中的clickHandler？
【发布时间】：2016-10-10 18:40:42
【问题描述】：

我是 React 新手，我正在尝试使用无状态组件创建一个简单的（可重用）历史返回按钮，但我不确定如何合并/在何处放置 clickHandler。我需要使用有状态组件吗？这是我正在尝试做的非工作近似。

import React from 'react';

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

handleClick() {
  // history back code
};

export default BtnBack;

【问题讨论】：

你在使用 React Router 吗？
这是有用的“React 无状态组件中的事件处理程序”stackoverflow.com/questions/39260595/…

标签： reactjs

【解决方案1】：

您正在编写对象/类之类的对象或类之外的代码。把这段代码想象成普通的 JavaScript：

import React from 'react';

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

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

如果你想传递更多参数，你也可以内联这个函数：

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

但是，在这种情况下，从可能与状态交互的父级向下传递函数是很常见的。

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

另外，您说的是“在 const 中”，但您可以根据需要使用 let 或 var，甚至可以直接导出。

【讨论】：