对无状态组件与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事件，请将组件转换为有状态（类）。

无状态

const ProjectListComponent = (props) => {
  const { onClick } = props
  return (
    <button onClick={onClick}>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>
    )
  }
}