Question

在尝试对我使用的任何HTML元素进行onclick时，Typesript会出现以下错误。

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>

如何在JSX中使用Typescript对html属性进行onclick

1 个答案: