javascript - 当我单击另一个组件上的按钮时如何更改组件状态

Question

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

我知道有很多这样的问题，但我发誓我就是无法理解。

我尝试过提升状态，但我就是做不到

home page button http://prntscr.com/n8jnlh

    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

parent state I want to change http://prntscr.com/n8jo07

    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 组件的按钮时，我需要它将位于 ProductPage 组件的属性“toggle400”的状态更改为 true

Answer 1

实现方法是将回调函数定义为从父组件传递到子组件的 prop。

当你点击子组件中的按钮时，就会执行这个回调函数，并且由于它是在父组件中，所以它可以调用 setState 来改变父组件中的状态。

确实有很多关于如何定义此类回调的示例。例如:

• https://stackoverflow.com/a/48407946/5532513
• https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766

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

在产品页面中:

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

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

在 NinjaH2R 中:

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