Javascript 单击子组件React Typescript not working

我在React和Typescript方面有问题，如果能得到你们的帮助就好了

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

这是他的父母：

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

changeActive=（问题：布尔值）=>{
控制台日志（问题）；
this.setState（{color:true}）；
}
render（）{
返回(
this.changeActive（true）}>选择您的完成。
this.changeActive}active={this.state.color？'active'：''}text=“在过去的75年里，森海塞尔一直把声音放在第一位。新的势头是真实的。“price=”“/>
this.changeActive}active={this.state.color？''：'active'}text=“所有吸引我们天文学家注意力和魅力的天体。”price=“”/>
)};

这是子元素：

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;

import*as React from“React”；
界面道具{active:string，htitle:string，text:string，price:string，onClick:（event:React.MouseEvent）=>void}；
导出功能项（道具：道具）{
返回(
{Props.htitle}
{Props.text！==“”？{Props.text}
：“”
{Props.price！==“”？+${Props.price}:“”
);
}
导出默认项；

我在这里肯定是不知所措的，因为我是新的反应和键入脚本的人，我希望这次he执行没有错误。

onClick={（）=>this.changeActive}

是错误的

---

使用

onClick={this.changeActive}

或

onClick={（）=>this.changeActive（）}

您应该这样做。关键是

（）=>this.changeActive

到

（）=>this.changeActive（true）

或任何您需要的内容

<Item htitle="Ivory White" onClick={() => this.changeActive(true)} active={ this.state.color ? 'active' : ' ' } text="For the past 75 years, Sennheiser has put sound first. The new MOMENTUM True." price=" " />

this.changeActive（true）}active={this.state.color？'active'：'}text=“过去75年来，森海塞尔一直把声音放在第一位。新的势头是真的。“price=”“/>

如果您按照以下方式更新代码，它将起作用：onClick={（）=>this.changeActive}=>onClick={（）=>onClick={（）=>this.changeActive（）}

render（）{
返回(
this.changeActive（true）}>选择您的完成。
this.changeActive（）}active={this.state.color？'active'：''}text=“在过去的75年里，森海塞尔一直把声音放在第一位。新的势头是真实的。“price=”“/>
this.changeActive（）}active={this.state.color？''：'active'}text=“所有吸引我们天文学家注意力和魅力的天体。”price=”“/>
)};

将父组件中的

onClick={（）=>this.changeActive}

更改为

onClick={this.changeActive}

。

您的代码中有几个问题：

props

用作值时不应大写，而应仅用作类型。我还建议使用

类型道具

，而不是

界面道具

在

Item

组件的onClick处理程序中，应通过以下方式之一调用

changeActive

方法：

您的渲染方法似乎缺少最后一个

元素。应该是这样的：

render（）{
返回(
this.changeActive（true）}>选择您的完成。
this.changeActive（）}active={this.state.color？'active'：''}text=“在过去的75年里，森海塞尔一直把声音放在第一位。新的势头是真实的。“price=”“/>
this.changeActive（）}active={this.state.color？''：'active'}text=“所有吸引我们天文学家注意力和魅力的天体。”price=”“/>
//丢失的标签
);
}

谢谢！由于某种原因，它以前没有像那样工作过，但现在它像一个符咒一样工作了！再次感谢！！

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

onClick={this.changeActive}

// or

onClick={() => this.changeActive()}

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>
        </div> // The missing tag
    );
}