(event: MouseEvent<Element, MouseEvent>) => void' 不可分配给类型 '() => Event'答案

【问题标题】：(event: MouseEvent<Element, MouseEvent>) => void' is not assignable to type '() => Event'(event: MouseEvent<Element, MouseEvent>) => void' 不可分配给类型 '() => Event'
【发布时间】：2019-06-29 11:07:13
【问题描述】：

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

类型错误： 类型 '(event: MouseEvent) => void' 不可分配给类型 '() => Event'。 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);
  }

如何解决此错误？

【问题讨论】：

你能澄清一下哪个组件包含哪个组件吗？

标签： reactjs typescript

【解决方案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

【讨论】：

我做到了，然后我从 activateKey() 函数中删除了参数，但我现在对 event.target 有新问题：TS2532：对象可能是“未定义”。我试过 if(event.target !== undefined)... 还是不行

【解决方案2】：

关于 event.target 的问题：TS2532: Object is possible is 'undefined'。

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

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

应该可以解决问题。

【讨论】：