Question

我正在进行一些标准的映射。

{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}，但是结果与标题显示不同。例如如果单击“老年人”按钮，我希望“老年人”对话框中的文本在所有情况下都带有“婴儿”。

Answer 1

主要问题是您使用相同的状态值来打开/关闭所有对话框this.state.open。因此，当您单击一个按钮时，将打开所有三个对话框，您会看到最后一个位于顶部。

要解决此问题：

  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

React没有在相同的映射序列中显示相同的映射项值

1 个答案: