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

【问题标题】：How to selectively enable/disable button in a table in React JS?如何在 React JS 的表格中选择性地启用/禁用按钮？
【发布时间】：2017-09-18 07:08:52
【问题描述】：

我正在使用 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>
              ),
            },
          ],
        },
      ]}

【问题讨论】：

您的代码很难阅读。我强烈建议你重构。请在这里查看什么是关注点分离en.wikipedia.org/wiki/Separation_of_concerns

标签： javascript reactjs button web

【解决方案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>
          ))},
        },
      ],
    },
  ]}

希望对您有所帮助。

【讨论】：

【解决方案2】：

我解决了这个问题：

检查状态。
添加一个简单的 if 循环来检查状态是否与关键字匹配。
如果匹配，则将该字段设置为禁用，否则所有其他关键字将按钮设置为启用状态

【讨论】：