第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

將狀態(tài)從子類傳遞給父類

將狀態(tài)從子類傳遞給父類

蕪湖不蕪 2021-11-18 21:19:51
我知道這可能是關(guān)于 React 被問(wèn)到最多的問(wèn)題,但沒(méi)有一個(gè)答案對(duì)我有幫助。我有兩個(gè)班級(jí):孩子class Preview extends Component {constructor(...args) {        super(...args);        this.state = {            isCommentOpen: false        };this.handleComment = ::this.handleComment;render() {return(button type="button" onClick={this.handleComment}>Comment</button>         )}handleComment(){        this.setState({isCommentOpen: !this.state.isCommentOpen});               }        export default Preview;家長(zhǎng)class Profile extends Component { render(){        return(        <div>             <_.Preview />//the place where I want to add validation from the component above             {this.state.isCommentOpen ? <span>Cool</span> : null}       </div>}
查看完整描述

1 回答

?
狐的傳說(shuō)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

您不應(yīng)該改變或直接分配this.props,如另一個(gè)答案所示:


this.props.isCommentOpen = !this.props.isCommentOpen // <-- DON'T DO THIS! ??

相反,你應(yīng)該有一個(gè)回調(diào)函數(shù)讓父組件更新子組件:


class Profile extends Component {


  constructor(props) {

    super(props);

    this.state = {

      isCommentOpen: false;

    }

    this.handleComment = this.handleComment.bind(this); // <-- important!

  }


  handleComment() {

    this.setState({ isCommentOpen: !this.state.isCommentOpen });

  }


  render() {

    return (

      <div>

        <Preview handleComment={this.handleComment} />

        { this.state.isCommentOpen ? <span>Cool</span> : null }

      </div>

    )

  }

}


export default Profile

然后子組件只需要調(diào)用this.props.handleComment:


// Child Component:

class Preview extends Component {


render() {

  return(

    <button type="button" onClick={this.props.handleComment}>Comment</button>

  }

}


export default Preview;


查看完整回答
反對(duì) 回復(fù) 2021-11-18
  • 1 回答
  • 0 關(guān)注
  • 187 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)