如何使用 onclick Reactjs 獲取按鈕 ID

Question

我正在研究 Reactjs 並使用 Nextjs，我正在使用“功能組件”（不是類），我在循環內有按鈕，我想使用“onClick”獲取按鈕的 ID，但我收到以下錯誤這是未定義的這是我當前的代碼

const deleteReview=async({currentTarget})=>
     {
        alert(currentTarget.value);
     }


{
    reviewfromserver.map(reviewnew=>{
        return(
                <div key={reviewnew.id}>
                    <div>{reviewnew.id}- {reviewnew.title} 
                        <button onClick={this.deleteReview} >Delete</button>
                    </div>
               </div>
              )
           })
}

Answer 1

1. 給按鈕添加一個id。 因為您的頁面中其他地方可能有相同的 ID，所以我建議將其添加為數據屬性。 然后，您可以在處理程序中從元素的數據集中獲取 id。

2. 您似乎混淆了在 React class 組件中調用 class 方法與在 React function 組件中調用函數。 不需要在 function 名稱之前加上this 。

3. 該處理程序沒有理由為async 。

 const { useState } = React; function Example({ reviewfromserver }) { function deleteReview(e) { console.log(e.target.dataset.id); } return ( <section> {reviewfromserver.map(reviewnew => { return ( <div key={reviewnew.id}> <div>{reviewnew.id} - {reviewnew.title} <button data-id={reviewnew.id} onClick={deleteReview} >Delete </button> </div> </div> ) })} </section> ); } const reviewfromserver = [ { id: 1, title: 'One' }, { id: 2, title: 'Two' }, { id: 3, title: 'Three' }, ]; ReactDOM.render( <Example reviewfromserver={reviewfromserver} />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

你有兩個選擇：

選項1：

像這樣bind使用它

 const deleteReview = async (id) => { alert(id); } { reviewfromserver.map(reviewnew=>{ return( <div key={reviewnew.id}> <div>{reviewnew.id}- {reviewnew.title} <button onClick={this.deleteReview.bind(this,reviewnew.id)} >Delete</button> </div> </div> ) }) }

選項 2

寫入兩個 function：

 const deleteReview = async (id) => () => { alert(id); } { reviewfromserver.map(reviewnew=>{ return( <div key={reviewnew.id}> <div>{reviewnew.id}- {reviewnew.title} <button onClick={this.deleteReview(reviewnew.id)} >Delete</button> </div> </div> ) }) }