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

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

一種從外部調(diào)用 React 組件方法的方法(帶有狀態(tài)和屬性)

一種從外部調(diào)用 React 組件方法的方法(帶有狀態(tài)和屬性)

牛魔王的故事 2023-10-14 18:57:30
我一直在調(diào)用我的 clickRemoveHandler。我的想法是,我有兩個(gè)組件:第一個(gè) - 渲染頁(yè)眉、導(dǎo)航和頁(yè)腳組件的布局,第二個(gè) - 計(jì)算器,它是我的核心組件,具有數(shù)據(jù)輸入等...在計(jì)算器組件中,我有具有托管狀態(tài)的按鈕,所以當(dāng)我單擊時(shí)在布局組件(div)的任何地方,我需要調(diào)用計(jì)算器函數(shù)來(lái)操作我的按鈕。代碼如下:class Layout extends Component {.....    clickHandler = (event) => {        Calculator.clickRemoveHandler(event);        console.log('Clikced')    };.....}class Calculator extends Component {  state = {    currentServiceClass: null,    hoverIndex: null,    btnClicked: false,    selectedService: null  }  currentCursorPosition = {    el: null,    index: null,    rendered: false  }  static clickRemoveHandler = (event) => {    if ((!event.target.hasAttribute("type")) && (this.state.btnClicked)) {      this.currentCursorPosition = {        el: null,        index: null,        rendered: false      };      this.setState({currentServiceClass: null, hoverIndex: null, btnClicked: false})    }  }....}這些組件中有很多邏輯,因此它們太強(qiáng)大,無(wú)法發(fā)布完整的代碼。但問(wèn)題是布局中沒(méi)有計(jì)算器引用,計(jì)算器本身是通過(guò)另一個(gè)組件的路由渲染的,所以我無(wú)法將任何數(shù)據(jù)從布局直接傳遞到計(jì)算器。我想要的是從布局中調(diào)用靜態(tài) clickRemoveHandler 。我猜靜態(tài)是使函數(shù)全局化的一個(gè)選項(xiàng)。所以它有效,但我收到錯(cuò)誤 TypeError: undefined is not an object (evaluating 'Calculator.state.btnClicked')。正如我所見(jiàn),這意味著當(dāng)調(diào)用 clickRemoveHandler 時(shí),它不與計(jì)算器組件關(guān)聯(lián),或者無(wú)法訪問(wèn)其狀態(tài)和屬性。問(wèn)題是我怎樣才能讓這一切一起工作?調(diào)用函數(shù)時(shí)傳遞計(jì)算器狀態(tài)還是有另一種更優(yōu)雅的方法來(lái)做到這一點(diǎn)?
查看完整描述

2 回答

?
GCT1015

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

我建議對(duì)于您描述的情況(不同級(jí)別的不同組件需要訪問(wèn)某些狀態(tài)并對(duì)其進(jìn)行操作)使用 React context。您還可以查看狀態(tài)管理器,例如ReduxMobX,但在這種特殊情況下,這將是開(kāi)銷(xiāo),因?yàn)槟膽?yīng)用程序不是那么“巨大”?;旧?,您需要?jiǎng)?chuàng)建一些單獨(dú)的文件夾(您可以將其稱為context),在其中您應(yīng)該創(chuàng)建上下文本身,將其導(dǎo)出并將其包裝在最上層的組件中,以便所有子級(jí)都能夠使用它。

您可以在這里找到一個(gè)示例:https ://codesandbox.io/s/spring-glitter-0vzul 。

這是文檔的鏈接: https: //reactjs.org/docs/context.html

如果您需要,我可以為您提供更多詳細(xì)信息


查看完整回答
反對(duì) 回復(fù) 2023-10-14
?
肥皂起泡泡

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

這是一個(gè)挑戰(zhàn),但我已經(jīng)做到了!布局組件:


state = {

    firstMount: false,

    clicked: false,

    clickedEvt: null

};

clickHandler = (event) => {

    console.log('Clikced')

    if (this.state.clickedEvt) 

        this.setState({clicked: false, clickedEvt: null});

    else         

        this.setState({clicked: true, clickedEvt: event.target}, ()=>{setTimeout(() => 

            this.setState({clicked: false, clickedEvt: null})

        , 50)})


};

        <LayoutContext.Provider value={{

            clicked: this.state.clicked,

            clickedEvt: this.state.clickedEvt,

            handleClick: this.clickHandler

        }}>


render() {

    return(

        <div onClick={(event) => this.clickHandler(event)} className="web">

首先,我從布局組件調(diào)用handleClick作為onclick事件,然后從計(jì)算器再次調(diào)用它


  componentDidUpdate() {

    if (this.context.clicked) {

      this.clickRemoveHandler(this.context.clickedEvt)

    }

  }


查看完整回答
反對(duì) 回復(fù) 2023-10-14
  • 2 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報(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)