使用onClick问题对无状态组件做出反应

Question

我有一个无状态组件，我希望能够点击图像并将其重定向到新页面。 我遇到的问题是我无法使用onClick正常工作。 我试图在onClick = {this.ProjectSelected}中编写一个函数，但这不起作用。 我是否必须将一个函数（onClick）从父组件传递给子组件？如果是这样，我该怎么做？ 我能够将项目ID记录到控制台。 谢谢你的帮助。

const projectListTemplates = (props) => {
    const { classes } = props;
    return (
        <div>
            <div className={classes.root}>
                <GridList className={classes.gridList}>
                    <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
                        <Subheader component="div">Projects</Subheader>
                    </GridListTile>
                    {props.data.map(item => (
                        <GridListTile key={item.image}>
                            <img src="./images/Project/1.jpg" alt={item.title} />
                            <GridListTileBar
                                title={item.title}
                                subtitle={<span> {item.name}</span>}
                                onClick={()=>console.log(`this project was clicked ${item.id}`)}
                                >

                                </GridListTileBar>
                            />
                            <ProgressBar now={60} />
                        </GridListTile>
                    ))}
                </GridList>
            </div>
        </div>
    );

Answer 1

在无状态组件中，我们没有定义任何本地属性，如状态或方法。我们只有道具和基于道具的渲染数据。我们只有要触发的道具事件。所以我们必须从父组件传递一个事件函数才能处理click事件。如果要在本地保留click事件，请将组件转换为有状态（Class）。

无状态

const ProjectListComponent = (props) => {
  const { handleClick } = props
  return (
    <button onClick={handleClick}>Click me</button>
  )
}

class AppComponent extends Component {
  handleClick() {
    console.log('clicked')
  }

  render() {
    return (
      <ProjectListComponent onClick={this.handleClick} />
    )
  }
}

有状态

class ProjectListComponent extends Component {
  handleClick() {
    console.log('clicked')
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    )
  }
}