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

  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>

    </>

  );

};