javascript - 如何获取特定行参数并向其发送 React Table 中的 API 调用？

Question

我正在使用 React Table(http://react-table.js.org)。我调用 API 并使用表中的数据填充表。在最后一列中，我添加了一个按钮，单击该按钮后应该:

• 获取所选行的参数(例如，获取特定行中显示的名称和id)
• 然后它将调用 API 并进行 POST 调用，上一步中收到的参数将在正文中发送
• 一旦我从 POST 调用中获得成功响应，我就会调用另一个 API 来刷新我的表并重新加载它。我使用下面的示例 API 来说明我的代码。

我的表实现如下，

    class TableExp extends React.Component {
    constructor() {
    super();

this.state = {
  tableData: [
    {
      ID: '',
      resourceType: '',
      Name: '',
      dealerID: '',
    },
  ],
 };
}

我的代码实现了按钮所在的列，如下所示:

    columns: [
            {
              filterable: false,
              Header: 'Action',
              accessor: 'action',
              Cell: (e) => (
                <button
                    onClick={() => {
                      console.log('CLicked value');
                      axios.post('https://reqres.in/api/users', {
                        headers: {},
                        data: {
                          "name":"Test",
                          "ID":"TestJob"
                        },
                        responseType: 'json',
                      })
                    .then((response) => {
                      console.log(response.data);
                      axios.get('https://reqres.in/api/users', {
                       headers: {},
                       responseType: 'json',
                      })
                    .then((response) => {
                      this.setState({ tableData: response.data });
                    });
                   });
                  }}
                    className="btn btn-primary"
                >
                Claim
                </button>
              ),
            },
          ],

通过上述实现，我能够调用 API 并发出 POST 请求(发送硬编码的主体参数值)，但我的问题是如何从 React 表中获取参数(从所选行)并将其包含在POST 调用的正文？我仅使用 React 进行状态管理，而不使用 Redux。

Answer 1

引用here

• row - 数据中的原始行
• row - 原始行的后访问值
• index - 行的索引
• viewIndex - 相对于当前页面的行索引

按照您的代码:

Cell: (e) => (
  axios.post('https://reqres.in/api/users', {
    headers: {},
    data: {
      ...,
      value: e.rowValue,
    },
    responseType: 'json',
  })
)

e 是 row，其中包含当前(选定)行中的数据