时间戳

首页 > 解决方案 > 试图通过道具将点击处理程序传递给阿波罗查询

reactjs - 试图通过道具将点击处理程序传递给阿波罗查询

问题描述

我正在尝试通过此类的道具传递点击处理程序

class App extends Component {
 handleToggle = (todo:any) => () => {
  // update todo 
  console.log("I WORK!");
};

 render() {
  return (
    <div className="App">
      <Todos onTodoClick={this.handleToggle}/>
    </div>
  );
}

}

到这个包含 a 的函数Query：

  function Todos(props: any) {
    return (
      <Query query={GET_TODOS}>
        {({ loading, error, data }) => {
          if (loading) return "Loading...";
          if (error) return `Error! ${error.message}`;
          return (
            <div>
              <List>
                {data.todos.map((todo: any) => (
                  <ListItem
                    key={todo.id}
                    onClick={() => props.onTodoClick(todo)} // HERE
                  >
                     <ListItemText primary={todo.text} />
                  </ListItem>
                ))}
              </List>
            </div>
          );
        }}
      </Query>
    );
  }

但是，无论我是创建Todo一个函数还是只是一个 const，props click 处理程序都不会被调用。我希望看到“我工作！” 在控制台中，但它没有发生。当接收函数包含 Apollo 查询时，任何想法如何通过道具传递点击处理程序？

标签： reactjsreact-apollo

解决方案

啊，我傻了。我写的handleToggle很烂。应该是：

handleToggle = (todo:any) => {
  // update todo 
  console.log("I WORK!");
};

在里面，App调用Todos

<Todos onTodoClick={()=>this.handleToggle}/>

推荐阅读