react中元咙,本身沒有提供主動(dòng)的子傳父方法施籍,實(shí)現(xiàn)方式就是回調(diào)函數(shù)仲吏。由父組件通過props傳遞給子組件一個(gè)方法,然后通過子組件調(diào)用這個(gè)方法實(shí)現(xiàn)子=>父通訊正什。
import React, { Component } from 'react';
/**父組件 */
export default class Index extends Component {
state = {
msg: 0
}
handleChange = (msg) => {
this.setState({
msg
})
}
render() {
return (
<div>
{/* 通過props傳遞onChange這個(gè)方法 */}
<SonComponent onChange={this.handleChange} msg={this.state.msg} />
</div>
);
}
}
/**子組件 */
const SonComponent = (props) => {
return (
/**在點(diǎn)擊事件中觸發(fā)父組件的onChange方法 */
<div onClick={()=>props.onChange(+props.msg+1)} >
{props.msg}
</div>
)
}
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者