typescript - OnClick 甚至反应打字稿都不起作用

Question

我是打字稿的新手，我想让这个 onclick 工作，但一切都编译得很好，但是 click Handel 函数永远不会运行？知道为什么吗？

import react, { useState } from 'react';
import { render } from 'react-dom';

// Set interface !!
interface Props {
  count?: number;
}

const App: React.FC<Props> = () => {
  const [count, setCount] = useState(0);

  // METHOD
  const handleClick = () => (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    //const type: string = event.currentTarget.title;
    // setCount((prevcount) => (type === 'decrement' ? prevcount - 1 : prevcount + 1));
  };

  return (
    <div>
      <button title='decrement' onClick={handleClick}>
        -
      </button>
      {count}
      <button title='increment' onClick={handleClick}>
        +
      </button>
    </div>
  );
};

export default App;

标签： typescript

Answer 1

您有一个额外的功能，() =>它使handleClick一个函数返回另一个事件处理函数，而不仅仅是一个记录到控制台的函数。

改变

  const handleClick = () => (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    //const type: string = event.currentTarget.title;
    // setCount((prevcount) => (type === 'decrement' ? prevcount - 1 : prevcount + 1));
  };

到

  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    //const type: string = event.currentTarget.title;
    // setCount((prevcount) => (type === 'decrement' ? prevcount - 1 : prevcount + 1));
  };