ListItem 在点击时打开和关闭？

Question

我有一个看起来像这样的 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 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>

  );

} 

理论上，当我点击取消按钮时，它应该被取消。但那不会发生。dialogState 保持不变——我错过了什么？谢谢，

在这个

Answer 1

这是使用对话框组件时的常见错误，你包裹了TodoItem组件主体ListItem，它onClick是setDialogState(true)，这对孩子的 onClick 有影响你应该像下面这样修改你的组件：export const TodoItem: React.FC<Props> = ({ todo, itemKey }) => {&nbsp; const [dialogState, setDialogState] = React.useState<boolean>(false);&nbsp; const handleClose = () => {&nbsp; &nbsp; setDialogState(false);&nbsp; };&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <Dialog&nbsp; &nbsp; &nbsp; &nbsp; open={dialogState}&nbsp; &nbsp; &nbsp; &nbsp; onClose={() => setDialogState(false)}&nbsp; &nbsp; &nbsp; &nbsp; aria-labelledby="form-dialog-title"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <DialogTitle id="form-dialog-title">Update</DialogTitle>&nbsp; &nbsp; &nbsp; &nbsp; <DialogContent>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultValue={todo.text}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoFocus&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin="dense"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </DialogContent>&nbsp; &nbsp; &nbsp; &nbsp; <DialogActions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button color="primary" onClick={handleClose}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Cancel&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button color="primary" onClick={handleClose}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Update&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; </DialogActions>&nbsp; &nbsp; &nbsp; </Dialog>&nbsp; &nbsp; &nbsp; <ListItem&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setDialogState(true);&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; key={itemKey}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <ListItemText primary={todo.text} />&nbsp; &nbsp; &nbsp; </ListItem>&nbsp; &nbsp; </>&nbsp; );};