我有一个按钮,我需要该按钮在单击时更改父状态值。
我知道有很多这样的问题,但我发誓我就是无法理解。
我尝试过提升状态,但我就是做不到
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
最佳答案
实现方法是将回调函数定义为从父组件传递到子组件的 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>
关于javascript - 当我单击另一个组件上的按钮时如何更改组件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55555572/