javascript - 如何在 React JS 中选择性地启用/禁用表格中的按钮？

Question

我正在使用 React Table(https://react-table.js.org)in 一个 REACT JS Web 应用程序，我从 API 获取数据并根据数据填充表格。在一列中，我有一个按钮，用于声明支持操作。如果对于特定行，状态是成功(我有来自 API 的状态数据)，我希望禁用按钮。但是，如果状态失败，我希望按钮处于事件状态(已启用)。我只使用 React，不使用 Redux用于状态管理。如何根据状态字段有选择地禁用一行中的按钮？我的代码如下所示。

    columns: [
            {
              filterable: false,
              Header: 'Action',
              accessor: 'action',
              Cell: (e) => (
                <button

                    onClick={() => {
                      axios.get(URL, {
                        headers: {
                          'content-type': 'application/json',
                          'Id': user.dealerId,
                          'Name' : user.Name,
                        },
                        responseType: 'json',
                      })
                      .then((response) => {
                        let responseData = response.data.data;
                        //console.log(responseData);
                        console.log(e.original.status);

                        function getEmailList(input, email) {
                          var output = [];
                          for (var i=0;i<input.length; ++i)
                            output.push(input[i][email]);
                          return output;
                        }
                        emailList = getEmailList(responseData, "email");
                        console.log(emailList);
                        axios({
                          method: 'post',
                          url: PostURL,
                          headers: {
                            'Content-Type' : 'application/json',
                            'Id': user.Id,
                            'Name' : user.Name,

                          },
                          data: {
                          'topic': 'details',
                          'message': {
                             'recipients': emailList,
                            'data': {
                                      'text': 'refresh',
                            },
                         'attachment': null,
                         'type': "",
                          },
                        },
                      })
                    .then((response) => {

                    });
                      });
                    }}
                    className="btn btn-primary"
                >
                Claim
                </button>
              ),
            },
          ],
        },
      ]}

Answer 1

这取决于ReactTable中使用的数据。
如果数据中的 action 参数包含 status 数据，那么这可能有效。

columns: [
        {
          filterable: false,
          Header: 'Action',
          accessor: 'action',
          Cell: (e) => {
          return (e.value == 'SUCCESS' ?
          (<button disabled>Claim</button>) :
          (
            <button
                onClick={() => {
                  ...
                }}
                className="btn btn-primary"
            >
            Claim
            </button>
          ))},
        },
      ],
    },
  ]}

希望这有帮助。