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

Question

我是 TypeScript 和 React 的新手，我有一个事件需要知道选择它的元素，以便我可以在页面上将另一个元素移动到它附近，但我在让它在 React 中工作时遇到了一些问题打字稿。

这是我目前的情况：

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();

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

Handle click with element in React TypeScript

reactjs

typescript

events

this