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

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

根據(jù) className 動態(tài)添加事件處理程序

根據(jù) className 動態(tài)添加事件處理程序

繁星淼淼 2021-12-23 14:31:52
我有一個 React 函數(shù)組件,我在 props 中獲得了另一個組件。像這樣的東西:function ChildComponent({cmp}) {    // Here onClick handlers should be added [for example:    // () => console.log("clicked")] to all    // elements in cmp of class .clickable    return ...}function ParentComponent() {    return (        <ChildComponent cmp={<div><button>Non-clickable</button><button className="clickable">Clickable</button></div>} />    )}那么如何在ChildComponent中的cmp props 變量中動態(tài)地將事件處理程序添加到具有可點擊類的元素?預(yù)先感謝您的幫助。
查看完整描述

1 回答

?
qq_花開花謝_0

TA貢獻(xiàn)1835條經(jīng)驗 獲得超7個贊

這使用了Children API,該API 允許您根據(jù)當(dāng)前的道具修改兒童的道具。ChildComponent 將首先循環(huán)遍歷其當(dāng)前子項,查找clickable className道具onClick并向其道具添加處理程序。


遞歸循環(huán)也允許嵌套子項工作。


function ChildComponent({ cmp }) {

  const handleOnClick = () => {

    alert("Clicked");

  };


  const childrenMap = (child) => {

    if (child.props) {

      const newProps = Object.assign({}, child.props);

      const { children, className } = newProps;

      if (className && className.split(' ').some(cn => cn === 'clickable')) {

        newProps.onClick = handleOnClick;

      }

      if (children) {

        newProps.children = Children.map(children, childrenMap);

      }

      return cloneElement(child, newProps);

    }

    return child;

  }


  return Children.map(cmp, childrenMap);

}


function ParentComponent() {

  return (

    <ChildComponent

      cmp={(

        <div>

          <button>Non-clickable</button>

          <div>

            <div>

              <button className="clickable">Clickable</button>

            </div>

          </div>

          <button className="clickable">Clickable</button>

        </div>

      )}

    />

  );

}


查看完整回答
反對 回復(fù) 2021-12-23
  • 1 回答
  • 0 關(guān)注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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