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

这取决于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> ))}, }, ], }, ]}数据，则可能会有效。

{{1}}

希望得到这个帮助。

Answer 2

我通过以下方式解决了这个问题：

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

如何在React JS中有选择地启用/禁用表中的按钮？

2 个答案: