Question

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

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

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

}

此函数包含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，道具点击处理程序都不会被调用。我希望看到“我在工作！”在控制台中，但没有发生。当接收函数包含Apollo查询时，如何将点击处理程序传递通过道具的任何想法？

Answer 1

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

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

在App内，用

调用Todos

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

尝试通过道具将点击处理程序传递给Apollo查询

1 个答案: