Javascript ListItem是否在单击时打开和关闭？

我有一个react/material ui组件，如下所示：

export const TodoItem: React.FC<Props> = ( {todo, itemKey}) => {
  const [dialogState, setDialogState] = React.useState<boolean>(false);
  const handleClose = () => {
    setDialogState(false);
  };

  return (
  <ListItem onClick={() => {
    setDialogState(true)
  }
  } key={itemKey}>
    <ListItemText
        primary={todo.text}
    />
    <Dialog open={dialogState} onClose={() => setDialogState(false)} aria-labelledby="form-dialog-title">
      <DialogTitle id="form-dialog-title">Update</DialogTitle>
      <DialogContent>
        <TextField
            defaultValue={todo.text}
            autoFocus
            margin="dense"
            id="name"
            fullWidth
        />
      </DialogContent>
      <DialogActions>
        <Button color="primary" onClick={handleClose}>
          Cancel
        </Button>
        <Button  color="primary" onClick={handleClose}>
          Update
        </Button>
      </DialogActions>
    </Dialog>
  </ListItem>
  )
}

export const TodoItem:React.FC=（{todo，itemKey}）=>{
const[dialogState，setDialogState]=React.useState（false）；
常量handleClose=（）=>{
setDialogState（假）；
};
返回(
{
setDialogState（真）
}
}key={itemKey}>
setDialogState（false）}aria labelledby=“表单对话框标题”>
更新
取消
更新
)
}

它被传递到此组件

export default function ShowTodos () {

  const [todos, setTodos] = React.useState<ITodo[]>([]);

  useEffect(() => {
      getTodos()
      .then(({data: {todos}}: ITodo[] | any) => {
        const todoList = todos
       setTodos(todoList)
      })
      .catch((err: Error) => console.log(err))
  }, [])

  return (
      <List>
        {todos.map((todo: ITodo ) =>
              <TodoItem todo={todo} key={todo._id}/>
        )}
      </List>
  );

} 

导出默认函数ShowTodos（）{
const[todos，setTodos]=React.useState（[]）；
useffect（（）=>{
getTodos（）
。然后（{data:{todos}}：ITodo[]| any）=>{
常数todoList=todos
setTodos（todoList）
})
.catch（（err:Error）=>console.log（err））
}, [])
返回(
{todos.map（（todo:ITodo）=>
)}
);
} 

理论上，当我单击“取消”按钮时，它应该被取消。但事实并非如此。对话状态保持不变-我缺少什么？ 谢谢

---

Nessa

这是使用对话框组件时的常见错误

您使用

ListItem

包装了

TodoItem

组件主体，其

onClick

为

setDialogState（true）

，这会影响孩子的onClick

您应该修改组件，如下所示：

export const TodoItem: React.FC<Props> = ({ todo, itemKey }) => {
  const [dialogState, setDialogState] = React.useState<boolean>(false);
  const handleClose = () => {
    setDialogState(false);
  };

  return (
    <>
      <Dialog
        open={dialogState}
        onClose={() => setDialogState(false)}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Update</DialogTitle>
        <DialogContent>
          <TextField
            defaultValue={todo.text}
            autoFocus
            margin="dense"
            id="name"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button color="primary" onClick={handleClose}>
            Cancel
          </Button>
          <Button color="primary" onClick={handleClose}>
            Update
          </Button>
        </DialogActions>
      </Dialog>

      <ListItem
        onClick={() => {
          setDialogState(true);
        }}
        key={itemKey}
      >
        <ListItemText primary={todo.text} />
      </ListItem>
    </>
  );
};

export const TodoItem:React.FC=（{todo，itemKey}）=>{
const[dialogState，setDialogState]=React.useState（false）；
常量handleClose=（）=>{
setDialogState（假）；
};
返回(
setDialogState（假）}
aria labelledby=“表单对话框标题”
>
更新
取消
更新
{
setDialogState（true）；
}}
key={itemKey}
>
);
};