Реакция не показывает одинаковое значение сопоставленного элемента в той же последовательности сопоставления - PullRequest
Новая
       7

Реакция не показывает одинаковое значение сопоставленного элемента в той же последовательности сопоставления

0 голосов
/ 10 февраля 2019

У меня есть какое-то стандартное отображение. 

{MEMBERSHIPS.map((mItem, index) => (
                <TableCell
                  className="text-uppercase text-center"
                  colSpan={2}
                  padding="dense"
                  value={mItem.label}
                  key={mItem.key}
                >
                  <Button onClick={this.handleClickOpen}>{mItem.label}</Button>
                  <Dialog
                    disableBackdropClick
                    disableEscapeKeyDown
                    open={this.state.open}
                    onClose={this.handleClose}
                  >
                    <DialogTitle>
                      Choose bulk edit {mItem.label} status
                    </DialogTitle>

...

Значение {mItem.label} правильно вытягивает заголовки, но еслиЯ снова использую этот ключ в режиме отображения, он возвращает последний элемент в массиве ... Я ожидаю, что {mItem.label} будет таким же, где бы он ни использовался.

https://codesandbox.io/s/kxrk5mnqjr

Если вы перейдете к приведенным выше кодам и окну ... нажмите на заголовок для старших, младших или младенцев - это кнопка 

<Button onClick={this.handleClickOpen}>{mItem.label}</Button>

Она открывает диалог, в котором я хочу снова использовать значение заголовка {mItem.label} но результат отличается от отображения заголовка.Например, если бы я нажал кнопку «Сеньоры», я бы ожидал, что текст диалога «Сеньоры» будет отображаться с «младенцами» во всех случаях.

1 Ответ

0 голосов
/ 10 февраля 2019

Основная проблема заключается в том, что вы используете одно и то же значение состояния для открытия / закрытия всех диалогов this.state.open.Поэтому, когда вы нажимаете одну кнопку, все 3 диалоговых окна открываются, и вы видите последний, находящийся сверху.

Чтобы это исправить: 

  handleClickOpen = value => {
    this.setState({ [`open${value}`]: true });
  };

  handleClose = value => {
    this.setState({ [`open${value}`]: false });
  };

И 

          <Button
            onClick={this.handleClickOpen.bind(this, mItem.value)}
          >
            {mItem.label}
          </Button>


         <Dialog
            disableBackdropClick
            disableEscapeKeyDown
            open={this.state[`open${mItem.value}`]}
            onClose={this.handleClose.bind(this, mItem.value)}
          >

          ...

Полный код https://codesandbox.io/s/pm0ovrvl97

...