(事件: MouseEvent<Element，MouseEvent>) => void‘不能分配到键入'() =>事件’

Question

这看起来很简单，但我无法处理这个问题--我总是在控制台中得到相同的消息：

类型错误：类型‘(事件: MouseEvent) => void’不能分配给键入'() =>事件‘。TS2322

这是我的密码：

//in one class  
//some code 
render() 
    return (
        <div className={keyStyle} key={key} onClick={() => this.props.turnKey()}></div>
    )

//in other classs
//some code
    return (
       <div className="container">
          <Display />
          <Keys turnKey={this.activateKey}/>
       </div>
    );
  }

  activateKey = (event : React.MouseEvent): void =>{
      console.log(event.target);
  }

如何解决此错误？

Answer 1

您没有将event (这是必要的)传递给您的this.props.turnKey。我建议您以如下方式传递this.props.turnKey：

<div className={keyStyle} key={key} onClick={this.props.turnKey}>

也许它能解决你的问题。

如果不是，那么支柱this.props.turnKey的声明就会出现一些问题。可能，你是这样宣布的

turnKey: () => Event

而不是

turnKey: (event: React.MouseEvent) => void

Answer 2

关于event.target的问题: TS2532: Object可能是“未定义的”。

您可以将目标声明为HTMLDivElement。因此

  activateKey = (event : React.MouseEvent): void =>{
    const clickedElement = event.target as HTMLDivElement;
    console.log(clickedElement.value); // ot whatever you need
  }

应该能起作用。