如何在单击位于另一个组件上的按钮时更改组件状态
如何在单击位于另一个组件上的按钮时更改组件状态
提问于 2019-04-07 12:16:22
我有一个按钮，我需要该按钮在单击时更改父状态值。
我知道有一大堆这样的问题，但我发誓我就是不明白。
我试过提升状态，但就是做不对
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 NinjaH2Rparent 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
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-07 12:18:43
要做到这一点，方法是将回调函数定义为从父组件传递给子组件的属性。
单击子组件中的按钮时，将执行此回调函数，由于它位于父组件中，因此它可以调用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55555572
复制相关文章
相似问题