reactjs - react 无状态组件与 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

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

无状态

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>
    )
  }
}