Блог

Главная - Вопросы по программированию - Как редактировать содержимое карточки пользовательского интерфейса материала

Как редактировать содержимое карточки пользовательского интерфейса материала

#javascript #reactjs #material-ui

#javascript #reactjs #материал-пользовательский интерфейс

Вопрос:

Я показываю несколько деталей в карточке пользовательского интерфейса материала и нажимаю кнопку «Редактировать». При нажатии кнопки редактирования мне нужно обновить содержимое карты в том же макете карты. Вот код

 <Card className={classes.root} variant="outlined">
  <CardContent>
    <Typography
      className={classes.title}
      color="textSecondary"
      gutterBottom
    >
      Word of the Day
    </Typography>
    <Typography>Name: 'RAAM'</Typography>
    <Typography>Blood group: 'AB '</Typography>
    <Typography>"Patient Ram is having bloodgroup AB "</Typography>
  </CardContent>
  <CardActions>
    <Button size="small" onClick={click}>
      Edit
    </Button>
  </CardActions>
</Card>

CodeSandbox
Как заставить функциональность редактирования работать?

Комментарии:

1. Разве вам не нужно использовать state ?

2. @GyuHyeonChoi Да, состояние есть, как только получите представление о том, как заставить функциональность обновления работать, можно довольно легко обновить состояние, поэтому смоделируйте локальные данные

3. Какой должна быть механика этой кнопки редактирования: должна ли она открывать модальную? Или включить редактирование полей типографики?

4. @tomrlh Сделать редактируемыми поля типографики — это то, что я пытаюсь получить.

Ответ №1:

   const [editing, setEditing] = useState(false);

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent>
        { editing ? (
          <textarea>
            editing
          </textarea>
        ) : (
          <div>
            <Typography
              className={classes.title}
              color="textSecondary"
              gutterBottom
            >
              Word of the Day
            </Typography>
            <Typography>Name: 'RAAM'</Typography>
            <Typography>Blood group: 'AB '</Typography>
            <Typography>"Patient Ram is having bloodgroup AB "</Typography>
          </div>
        )}
      </CardContent>
      <CardActions>
        <Button size="small" onClick={() => setEditing(true)}>
          Edit
        </Button>
      </CardActions>
    </Card>
  );

Однако вы можете предоставить редактируемый вид одного и того же макета таким образом, в зависимости от editing состояния.

Ответ №2:

Я думаю, что лучше использовать поля ввода вместо компонентов типографии. Я привел здесь пример. Когда вы нажимаете «Редактировать», поля ввода доступны для редактирования, а когда он теряет фокус, он блокируется для редактирования:

 // all imports here

const useStyles = makeStyles({
[...]
});

export default function OutlinedCard() {
  const [isEditable, setIsEditable] = useState(false);
  const [name, setName] = useState("");
  const classes = useStyles();

  const handleEdit = () => {
    console.log("I am here");
    setIsEditable(!isEditable);
  };

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Word of the Day
        </Typography>
        <TextField
          id="standard-basic"
          label="Name:"
          disabled={!isEditable}
          value={name}
          onChange={(e) => setName(e.target.value)}
          onBlur={() => setIsEditable(false)}
        />
      </CardContent>
      <CardActions>
        <Button size="small" onClick={handleEdit}>
          Edit
        </Button>
      </CardActions>
    </Card>
  );
}