Javascript React：onClick表数据（按钮）-获取与使用map生成的行相关的全部数据

有许多查询与获取表行数据有关，我尝试了所有方法。请帮助我找出哪里做错了

单击choose按钮后，我必须获取与该行相关的数组

如何获取行相关数据（数组）

我的代码如下：

在该州：

 this.state = {
      demo: [
        {
          no: 1,
          name: "test",
          cityname: "hyd",
          cityname1: "bng",
          basec: 10,
          other: "addtnal data",
        },
        {
          no: 2,
          name: "test2",
          cityname: "del",
          cityname1: "krnt",
          basec: 20,
          other: "addtnal data",
        },
      ]}

我的jsx表格：

<Table className={classNames(classes.table)}>
              <TableHead>
                <TableRow>
                  <TableCell padding="default">no</TableCell>
                  <TableCell align="right">name</TableCell>
                  <TableCell align="right">cityname</TableCell>
                  <TableCell align="right">cityname1</TableCell>
                  <TableCell align="right">basec</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {this.state.demo.map((item) => [
                  <TableRow key={item.no}>
                    <TableCell padding="default">{item.no}</TableCell>
                    <TableCell align="right">{item.name}</TableCell>
                    <TableCell align="right">{item.cityname}</TableCell>
                    <TableCell align="right">{item.cityname1}</TableCell>
                    <TableCell align="right">{item.basec}</TableCell>
                    <TableCell align="right">
                      <Button
                        color="secondary"
                        data-item={item}
                        onClick={this.handleChoosedRow}
                      >
                        Choose
                      </Button>
                    </TableCell>
                  </TableRow>,
                ])}
              </TableBody>
            </Table>

预期产出：

例如，单击第一行（索引[0]），所选日期将为

  {
          no: 1,
          name: "test",
          cityname: "hyd",
          cityname1: "bng",
          basec: 10,
          other: "addtnal data",
        }

---

您需要更改

onClick

事件，如

onClick={（）=>this.handleChoosedRow（项目）}

这里的

item

是您在map方法下的预期结果，您可以直接将其传递给

handleChoosedRow

然后您可以在

handleChoosedRow

函数中获得所选行，如

handleChoosedRow = (row) => {
  console.log("choosed flight", row);
};

表格：

    <Table>
      <TableHead>
            <TableRow>
              <TableCell padding="default">no</TableCell>
              <TableCell align="right">name</TableCell>
              <TableCell align="right">cityname</TableCell>
              <TableCell align="right">cityname1</TableCell>
              <TableCell align="right">basec</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.state.demo.map((item) => [
              <TableRow key={item.no}>
                <TableCell padding="default">{item.no}</TableCell>
                <TableCell align="right">{item.name}</TableCell>
                <TableCell align="right">{item.cityname}</TableCell>
                <TableCell align="right">{item.cityname1}</TableCell>
                <TableCell align="right">{item.basec}</TableCell>
                <TableCell align="right">
                  <Button
                    color="secondary"
                    data-item={item}
                    onClick={() => this.handleChoosedRow(item)}
                  >
                    Choose
                  </Button>
                </TableCell>
              </TableRow>,
            ])}
          </TableBody>
    </Table>

handleChoosedRow = (row) => {
  console.log("choosed flight", row);
};

---

您需要更改

onClick

事件，如

onClick={（）=>this.handleChoosedRow（项目）}

这里的

item

是您在map方法下的预期结果，您可以直接将其传递给

handleChoosedRow

然后您可以在

handleChoosedRow

函数中获得所选行，如

handleChoosedRow = (row) => {
  console.log("choosed flight", row);
};

表格：

    <Table>
      <TableHead>
            <TableRow>
              <TableCell padding="default">no</TableCell>
              <TableCell align="right">name</TableCell>
              <TableCell align="right">cityname</TableCell>
              <TableCell align="right">cityname1</TableCell>
              <TableCell align="right">basec</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.state.demo.map((item) => [
              <TableRow key={item.no}>
                <TableCell padding="default">{item.no}</TableCell>
                <TableCell align="right">{item.name}</TableCell>
                <TableCell align="right">{item.cityname}</TableCell>
                <TableCell align="right">{item.cityname1}</TableCell>
                <TableCell align="right">{item.basec}</TableCell>
                <TableCell align="right">
                  <Button
                    color="secondary"
                    data-item={item}
                    onClick={() => this.handleChoosedRow(item)}
                  >
                    Choose
                  </Button>
                </TableCell>
              </TableRow>,
            ])}
          </TableBody>
    </Table>

handleChoosedRow = (row) => {
  console.log("choosed flight", row);
};

---

现在出现了什么问题？单击“选择”时，我无法获取相关的行数据。但它应该无法呈现行数据，因为您的映射函数

this.state.demo.map（（项）=>[//代码]

。它应该是

this.state.demo.map（（项）=>（//代码）

现在出现了什么问题？单击“选择”，我无法获取相关的行数据。但它应该无法呈现行数据，因为您的映射函数

this.state.demo.map（（项）=>[//代码]

。应该是

this.state.demo.map（（项）=>（//代码）