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

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何從類組件（父級）更改功能組件（子級）中的 useState

如何從類組件（父級）更改功能組件（子級）中的 useState

喵喵時光機(jī) 2023-07-06 11:08:54
在我的父班中，我有以下內(nèi)容<div>  <button onClick(OPEN MODAL)>Open Modal<button/>  <ModalReply /> // default to be closed at first</div>ModalReply 是功能組件function ModalReply(props) {  const [modalIsOpen, setModalIsOpen] = useState(false)<div>  <Modal     isOpen={modalIsOpen}    onRequestClose={() => setModalIsOpen(false)}  >   <h1>Test</h1>  </Modal></div>我想從我的父類訪問模態(tài)狀態(tài)組件并將 useState --> setModalIsOpen 設(shè)置為 true
查看完整描述

3 回答

?
慕的地8271018

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

在父組件中設(shè)置 modalState 并將它們作為子組件的 props 傳遞。


在父母中


  const [modalIsOpen, setModalIsOpen] = useState(false)


  const toggleModal = (val) => setModalIsOpen(val)


...


  <ModalReply modalisOpen={modalIsOpen} toggleModal={toggleModal}/>


在兒童時期


function ModalReply(props) {


<div>

  <Modal 

    isOpen={props.modalIsOpen}

    onRequestClose={() => props.toggleModal(false)}

  >

   <h1>Test</h1>

  </Modal>

</div>


查看完整回答
反對 回復(fù) 2023-07-06
?
慕哥9229398

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

將狀態(tài)移至父級，使您的 ModalReply 無狀態(tài)。


const ModalReply = ({ isOpen, onClose }) => (

  <div>

    <Modal isOpen={isOpen} onRequestClose={onClose}>

      <h1>Test</h1>

    </Modal>

  </div>

);


export default function App() {

  const [isOpen, setIsOpen] = useState(false);


  const toggle = setIsOpen((oldIsOpen) => !oldIsOpen);


  return (

    <div className="App">

      <button onClick={toggle}>Open Modal</button>

      <ModalReply isOpen={isOpen} onClose={toggle} />

    </div>

  );

}


查看完整回答
反對 回復(fù) 2023-07-06
?
冉冉說

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個贊

React數(shù)據(jù)流是單向的，父組件不能直接修改子組件的狀態(tài)。為了實(shí)現(xiàn)你想要的，你需要：

  • 將狀態(tài)移動到父組件并將數(shù)據(jù)作為 props 傳遞給子組件。

  • 使用 redux 或 mobx 等狀態(tài)管理器

  • 使用上下文 API


查看完整回答
反對 回復(fù) 2023-07-06
  • 3 回答
  • 0 關(guān)注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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