使用React TypeScript中的元素处理点击

Question

我是TypeScript和React的新手，我有一个事件需要知道选择它的元素，这样我就可以在页面上移动它附近的另一个元素，但我在让它在React TypeScript中工作时遇到了一些困难。

以下是我目前所拥有的：

import React from "react";
import './BenefitHeader.css';
import BenefitType from "./BenefitType";
import BenefitSelectIndicator from './BenefitSelectIndicator';
interface State {
left?: number;
}
export default class BenefitHeader extends React.Component<State> {
constructor(state:State) {
super(state)
this.state = {
left: 0
}
this.handleSelected = this.handleSelected.bind(this)
}

handleSelected = (e: React.ChangeEvent<HTMLInputElement>)=> {
const newValue = e.target.getBoundingClientRect();
console.log(newValue);
}
render() {
return (
<div>
<div className="BenefitTitle">
<span>Benefit</span>
</div>
<BenefitType name="Purchase" onClick={this.handleSelected}/>
<BenefitType name="Purchase" onClick={this.handleSelected}/>
<BenefitSelectIndicator color="black" width={100}/>
</div>
)
}
}

handleSelected从未以其当前形式被调用，我曾尝试将onClick转换为onClick={this.handleSelected(this)}，但在TypeScript中键入时遇到了问题。

更新时间：添加BenefitType:

import React from "react";
import './BenefitType.css';
import BenefitSelectIndicator from './BenefitSelectIndicator';

interface Props {
name: string,
onClick: (e: React.ChangeEvent<HTMLInputElement>) => void
}
interface State {
isSelected: boolean;
}
export default class BenefitType extends React.Component<Props, State> {
render() {
return (
<div className="BenefitTypeTitle">
<span className="BenefitTypeTitle purchase">
{this.props.name}
</span>
</div>
)
}
}

Answer 1

BenefitType是一个自定义组件。它不会调用您的onClick，因为BenefitType不会将单击处理程序放在任何东西上。

您可以将onClick道具传递给自定义组件，但最终需要将该函数设置为实际的html元素才能工作。

要正确实现onClick道具，BenefitType需要执行以下操作：

export default class BenefitType extends React.Component<Props, State> {
render() {
return (
<div className="BenefitTypeTitle" onClick={this.props.onClick}>
<span className="BenefitTypeTitle purchase">
{this.props.name}
</span>
</div>
)
}
}

---

此外，您的点击处理程序类型为React.ChangeEvent<HTMLInputElement>，这是<input>元素获取新值的事件。这不是正确的事件。

正确的事件类型是：

React.MouseEvent<HTMLElement>

您可以通过添加一个伪onClick处理程序来发现这一点，例如：

onClick={(event) => undefined}

并将鼠标悬停在event上查看其类型。

要获得getBoundingClientRect，必须使用事件的currentTarget属性：

e.currentTarget.getBoundingClientRect();