當我單擊另一個組件上的按鈕時如何更改組件狀態

Question

我有一個按鈕，我需要該按鈕在單擊時更改父狀態值。

我知道有很多這樣的問題，但我發誓我只是聽不懂。

我試圖提升狀態，但是我做對了

主頁按鈕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

父狀態我想更改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組件上的按鈕時，我需要它將位於產品頁面組件上的道具“ toggle400”的狀態更改為true。

Answer 1

實現方法是將回調函數定義為從父組件傳遞到子組件的道具。

當您單擊子組件中的按鈕時，將執行此回調函數，並且由於它位於父組件中，因此可以調用setState來更改父組件中的狀態。

確實有許多關於如何定義此類回調的示例。 例如：

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

在您的代碼中，我相信以下內容會起作用：

在ProductPage中：

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

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

在NinjaH2R中：

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