如何在Typescript中使用JSX中的html屬性onclick

Question

Typesript在嘗試在我使用的任何HTML元素上使用onclick時給出以下錯誤。

ERROR in /Volumes/WorkSpace/Projects/wirecash-client/src/elements/dropdown/Dropdown.tsx 
(25,45): error TS2339: Property 'onclick' does not exist on type 'HTMLProps<HTMLButtonElement>'. 

我的組件：

import React from 'react' 
import { ClientTypes } from 'types' 

interface Props { 
    items: Array<ClientTypes.DropdownItem> 
    onClick(item:ClientTypes.DropdownItem):() => void 
} 

const Dropdown = ({onClick, items}) => { 
    let selectedItem = null; 
    for(let i=0, j=items.length; i<j; i++) { 
    if(items[i].selected) { 
     selectedItem = items[i]; 
     break; 
    } 
    } 
    return (
    <div className="dropdown show"> 
     <a className="btn btn-secondary dropdown-toggle" aria-haspopup="true" aria-expanded="false"> 
     {selectedItem.name} 
     </a> 

     <div className="dropdown-menu" aria-labelledby="dropdownMenuLink"> 
     {items.map((item) => (
      <button className="dropdown-item" onclick={onClick(item)}> 
      Action 
      </button> 
     ))} 
     </div> 
    </div> 
) 
} 

export default Dropdown 

Answer 1

onclick屬性必須是駱駝套管onClick

這工作！

<button className="dropdown-item" onClick={onClick(item)}> 
    Action 
</button>