javascript - 单击子组件 React Typescript 不起作用

Question

我在使用 React 和 Typescript 时遇到了问题，如果能从你们那里得到一些帮助那就太好了!

我试图将 onclick 事件分配给我的子框组件，但它不起作用，它不会触发任何错误，只是显然不起作用。

这是他的 parent :

    changeActive = (issue: boolean) => {
      console.log(issue);
      this.setState({ color: true });
    }

    render() {
      return (
        <div>
            <div className="box">
              <h4 onClick={() => this.changeActive(true)}>Choose your finish.</h4>
              <div className="box--vertical">
                <Item htitle="Ivory White" onClick={() => this.changeActive} active={ this.state.color ? 'active' : ' ' } text="For the past 75 years, Sennheiser has put sound first. The new MOMENTUM True." price=" " />
                <Item htitle="Matte Black" onClick={() => this.changeActive} active={ this.state.color ? ' ' : 'active' } text="Of all of the celestial bodies that capture our attention and fascination as astronomers." price=" " />
              </div>
            </div> )};

这是子元素:

import * as React from "react";

interface Props { active: string, htitle: string, text: string, price: string, onClick: (event: React.MouseEvent<HTMLDivElement>) => void };


export function Item(Props: Props) {
    return (
        <div className={`item ${Props.active}`} onClick={Props.onClick}>
          <div>
            <span>{Props.htitle}</span>
              {Props.text !== " " ? <p>{Props.text}</p>: ""}
          </div>
          {Props.price !== " " ? <span>+${Props.price}</span>: "" }
        </div>
      );
}

export default Item;

我在这里肯定不知所措，因为我是 react 和 typescript 的新手，我希望这次执行没有错误。

Answer 1

onClick={() => this.changeActive} 是错误的。

使用onClick={this.changeActive}或onClick={() => this.changeActive()}