在 antd 表中单击后如何禁用按钮？

Question

Getting the table values through props. The claim update function is working fine, but the record still there. once I refresh or select another tab only after that the claimed record will be removed.

{
  title: 'Action',
  dataIndex: 'action',
  render: (text, record) =>
          <Button class="claimBom-btn" onClick={(e) => this.handleClaim(e,text, record)} ><Icon type="plus-circle" />Claim</Button>
      }

This the button call for all record in the table

Answer 1

Just pass along the button state in the datasource. When it is clicked mutate the datasource.

const [datasource, setDatasource] = useState([
{
 disabled: false,
 // others properties
}
]);


// On button click find the data and change disabled property
const onClick = (id) => {
 const source = datasource.find(source => source.id === id);
 source.disabled = true;
 setDatasource(datasource);
}

{
  title: 'Action',
  dataIndex: 'action',
  render: (text, record) =>
   <Button disabled={text.disabled} class="claimBom-btn" onClick={(e) => this.handleClaim(e,text, record)} ><Icon type="plus-circle" />Claim</Button>
}

Answer 2

You can simply pass the disabled prop to the button accordingly. When calling this.handleClaim , set a state of which button should be disabled while handling, and pass that as a disabled prop to the button.