React-Table 獲取單擊按鈕的行

Question

我正在使用 React-Table 開發一個小型 React 項目。 我有一列帶有 Header Optionen，每個單元格中都有一個按鈕。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> render() { const columns = [{ Header: 'Baumart', accessor: 'baumart' },{ Header: 'Größe', accessor: 'größe' },{ Header: 'Anzahl', accessor: 'anzahl' },{ Header: 'Preis pro Baum', accessor: 'preis' },{ Header: 'Optionen', accessor: 'platzhalter', Cell: ({ cell }) => ( <button id="test" onClick={this.deleteRow(this)}> Löschen </button> ) }] return ( <> <div className='background'> <div id="snowflakes"> <ParticleBackground/> </div> <div className='side-grid'> <div className='header'> <h2> <span className='header-l'> Weihnachtsbaumverkauf<br/> Warenkorb </span> <span className='header-r'><Link to="/shop" className='warenkorb'><img alt='homeicon' src={homeicon} width='32px' height='32px'></img></Link></span> </h2> </div> <div className='content'> <div> <ReactTable data={this.state.tabledata} columns={columns} showPaginationBottom={false} /> </div> </div> <footer className='footer'><p className='footertext'>Impressum &bull; Datenschutzerklärung<br />Copyright &copy; 2021 - 2022</p></footer> </div> </div> </> ); } }

這些按鈕的任務是在 axios 請求的幫助下刪除一行。

 deleteRow(data) { return function () { api.post('/delete', { baumart: data.state.tabledata[0].baumart, größe: data.state.tabledata[0].größe }) } }

它工作得還不錯，但是 onClick={this.deleteRow(this)} 只給了我完整的表格作為參數，當我單擊任何按鈕時，表格中的第一行被刪除。

所以我必須找到一個解決方案......

data.state.tabledata[0].baumart 總是給我第一行的 baumart 和 data.state.tabledata[1].baumart 總是給我第二行的 baumart

而不是 0 或 1,2,3,4,5...n 我需要當前行的 const 或 state 我的一個按鈕被按下。

我將非常感謝您的每一次幫助。

PS：我真的很抱歉我的英語，還在努力提高它。

Answer 1

Cell提供 arguments 之類的value和row ，您可以使用它們來識別單擊了哪一行的單元格。 以下片段可以幫助您 -

 Cell: (props) => (
         <button id="test" onClick={alert(JSON.stringify(props))}>
            Löschen 
         </button>
      )