Javascript 如何在单击另一个组件上的按钮时更改组件状态

我有一个按钮，我需要该按钮在单击时更改父状态值

我知道有很多这样的问题，但我发誓我就是不明白

我已经试着提升这个州，但我就是做不好

import React，{Component，Fragment}来自“React”
从“../App.css”导入应用程序
从“../productPage”导入productPage
类NinjaH2R扩展了组件{
呈现（）{
报税表（
{/*lista de produtos*/}
莫托斯
忍者
400
)
}
}
导出默认NinjaH2R

import React，{Component，Fragment}来自“React”
从“./components/Ninja400”导入Ninja400
从“/productJSON”导入产品；
从“./App.css”导入应用程序
从“./components/NinjaZX6R”导入NinjaZX6R；
从“./components/Z900”导入Z900；
从“./components/NinjaH2R”导入NinjaH2R；
从“./components/Toggle”导入切换
类ProductPage扩展组件{
建造师（道具）{
超级（道具）
此.state={
toggle400:false，
toggleZX6R:false，
toggleZ900:错误，
开关2：对，
}
让modelo
}
渲染（）{
设modelo=null
if（this.state.toggle400==true）{
摩洛=
this.state.toggleZX6R=false
this.state.toggleZ900=false
this.state.toggleH2R=false
}
if（this.state.toggleZX6R===true）{
摩洛=
this.state.toggle400=false
this.state.toggleZ900=false
this.state.toggleH2R=false
}
if（this.state.toggleZ900==true）{
摩洛=
this.state.toggleZX6R=false
this.state.toggle400=false
this.state.toggleH2R=false
}
if（this.state.toggleH2R==true）{
摩洛=
this.state.toggleZX6R=false
this.state.toggleZ900=false
this.state.toggle400=false
}
console.log（这个）
返回(
{modelo}
)
}
}
导出默认产品页

---

当我点击NinjaH2R组件上的按钮时，我需要它将prop“toggle400”的状态更改为true，位于ProductPage组件上。方法是将回调函数定义为从父组件传递到子组件的prop

当您单击子组件中的按钮时，将执行此回调函数，因为它位于父组件中，所以它可以调用setState来更改父组件中的状态

关于如何定义这样的回调，确实有很多例子。例如：

在您的代码中，我相信以下内容将起作用：

在ProductPage中：

ninjaHandler=（）=>{
this.setState（{toggle400:true}）；
}

在NinjaH2R中：

忍者400

你能发布

NinjaH2R

和

ProductPage

components@JSEngine我已经添加了代码help please@jsengine几天来我一直在努力让它工作，你能帮我展示一下如何在我的代码上这样做吗？这不是懒散什么的，我真的不明白，谢谢你看到了。还需要帮助吗？请你解释一下这一部分。父组件作为道具传递一个函数，由子组件设置为按钮点击处理程序。单击按钮时，将调用此函数。因为它在父对象的范围内，所以它可以在父对象中设置状态。

    import React, { Component,Fragment } from 'react'
    import App from '../App.css'
    import productPage from '../ProductPage'

    class NinjaH2R extends Component {
    render () {    
    return ( 
    <Fragment>
       <table> {/*lista de produtos */}
          <td className="drop">
            <div className="dropdown">
              <button className="dropbtn">Motos ˅</button>
            <div className="dropdown-content">
            <div>
               <button  /*onClick={this.handleClick.bind(this)}*/ >Ninja 
               400</button>
            </div>
          </td>
        </table> 
    </Fragment>
        )
    }
}
export default NinjaH2R

    import React, { Component,Fragment } from 'react'
    import Ninja400 from './components/Ninja400'
    import product from './productJSON';
    import App from './App.css'
    import NinjaZX6R from './components/NinjaZX6R';
    import Z900 from './components/Z900';
    import NinjaH2R from './components/NinjaH2R';
    import Toggle from './components/Toggle'
    class ProductPage extends Component {
    constructor(props){
        super(props)
        this.state = {
        toggle400: false,
        toggleZX6R: false,
        toggleZ900: false,
        toggleH2R: true,
        }
        let modelo
    }
    render () {
        let modelo=null
        if(this.state.toggle400===true){
            modelo=<Ninja400 product={product}/>
            this.state.toggleZX6R = false
            this.state.toggleZ900 = false
            this.state.toggleH2R = false

        }
        if(this.state.toggleZX6R===true){
            modelo=<NinjaZX6R product={product}/>
            this.state.toggle400 = false
            this.state.toggleZ900 = false
            this.state.toggleH2R = false
        }
        if(this.state.toggleZ900===true){
            modelo=<Z900 product={product}/>
            this.state.toggleZX6R = false
            this.state.toggle400 = false
            this.state.toggleH2R = false
        }
        if(this.state.toggleH2R===true){
            modelo=<NinjaH2R product={product}/>
            this.state.toggleZX6R = false
            this.state.toggleZ900 = false
            this.state.toggle400 = false
        }
        console.log(this)
        return (
            <Fragment >
                <div className="ProductPage">
                    {modelo}
                </div>
            </Fragment>
        )
    }
}

export default ProductPage

<NinjaH2R product={product} 
  callback={this.ninjaHandler}
  product={product}
/>

ninjaHandler = () => {
  this.setState({ toggle400: true });
}

<button onClick={this.props.callBack}>
  Ninja 400
</button>