React-Table 获取单击按钮的行答案

【问题标题】：React-Table get row where button is clickedReact-Table 获取单击按钮的行
【发布时间】：2022-01-28 06:00:50
【问题描述】：

我正在使用 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 或当前行的状态，其中我的一个按钮被按下。

我会非常感谢每一个帮助。

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

【问题讨论】：

你可能可以在 React 中找到一个更好的表格包，但是对于这种情况，Cell 函数需要一些单元格信息作为参数，也许你可以从那里提取行信息。
@tromgy 你能告诉我怎么做吗？我对反应还很陌生，这将是一个很大的帮助。
您的问题中没有足够的信息来给出更明确的答案。你能提供一个minimal reproducible example吗？

标签： javascript reactjs axios row react-table

【解决方案1】：

Cell 提供value 和row 之类的参数，您可以使用它们来识别单击了哪一行的单元格。关注sn-p可以帮到你-

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

【讨论】：