Mam komponent reakcji / materiału-UI, który wygląda tak:

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

Jest przekazany do tego komponentu


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>
  );

} 

W teorii, gdy klikam przycisk Anuluj, należy go anulować. Ale to się nie dzieje. Diogstetacja pozostaje taka sama - czego brakuje? Dzięki,

Nessa.

1
Nespony 13 październik 2020, 18:16

1 odpowiedź

Najlepsza odpowiedź

Jest to powszechny błąd podczas korzystania z komponentów dialogowych,

Rzuciłeś TodoItem korpus komponentu z ListItem i jego onClick jest setDialogState(true), efekty w dziedzinie Onclick

Powinieneś zmodyfikować swój komponent jak poniżej:

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>
    </>
  );
};
1
mortezashojaei 13 październik 2020, 18:13