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

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

React ：處理多個(gè)瀏覽器、瀏覽器選項(xiàng)卡以限制重復(fù)操作

React ：處理多個(gè)瀏覽器、瀏覽器選項(xiàng)卡以限制重復(fù)操作

梵蒂岡之花 2023-11-12 15:00:54
我有一個(gè)按鈕，Submit單擊時(shí)會(huì)執(zhí)行一些調(diào)用 API 的操作。單擊后，按鈕被禁用或基本上按鈕的初始狀態(tài)和操作被更改。我有兩個(gè)或多個(gè)瀏覽器選項(xiàng)卡，它們顯示相同的屏幕Submit。如果在任一選項(xiàng)卡中Submit執(zhí)行該操作，其他選項(xiàng)卡應(yīng)顯示更新的版本。其他選項(xiàng)卡應(yīng)顯示禁用版本，并且不應(yīng)顯示初始狀態(tài)。我該如何實(shí)現(xiàn)這一目標(biāo)？我正在使用 React、JS
查看完整描述

4 回答

?
天涯盡頭無(wú)女友

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

#1 數(shù)據(jù)重復(fù)必須在服務(wù)器端受到限制。

  • 我會(huì)推薦一些緩存，例如node-cache。節(jié)點(diǎn)緩存會(huì)存在可擴(kuò)展性問(wèn)題，因此最好使用redis。（邏輯應(yīng)該是smt。例如：如果表單已使用user_id, 或 withform_id提交，您可以為其創(chuàng)建一個(gè)緩存，如果繼續(xù)，則將其存儲(chǔ)在數(shù)據(jù)庫(kù)中，其他情況會(huì)引發(fā)錯(cuò)誤。在其他瀏覽器上submit如果既不unique_id在緩存中也不在 中，則必須在之前進(jìn)行驗(yàn)證db。如果存在，則可能會(huì)在 nr.2 瀏覽器中引發(fā)錯(cuò)誤。

#2 如果你想禁用該按鈕，你必須使用websockets


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
幕布斯7119047

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

從 UI/UX 角度來(lái)看，處理此問(wèn)題的最佳方法是使用驗(yàn)證。如果User A單擊“提交”，然后User B從不同的瀏覽器或選項(xiàng)卡單擊“提交”，則應(yīng)顯示錯(cuò)誤以User B指示“此操作已發(fā)生”。

話(huà)雖如此，您想要實(shí)現(xiàn)的目標(biāo)是可能的。

一種方法是使用 WebSocket。WebSocket 是客戶(hù)端和服務(wù)器之間的持久連接，允許雙向通信。

React 應(yīng)用程序中帶有提交按鈕的頁(yè)面將是某個(gè) websocket 通道的“訂閱者”。當(dāng)?shù)谝淮螁螕籼峤话粹o時(shí)（無(wú)論從哪里單擊），消息都可以從 WebSocket 服務(wù)器“發(fā)布”給ALL訂閱者，無(wú)論使用什么瀏覽器或選項(xiàng)卡。

onMessage基本上，您可以在 React 應(yīng)用程序中添加一個(gè)處理程序，您可以在收到特定消息時(shí)禁用提交按鈕。

我不知道你在服務(wù)器端使用什么技術(shù)，但是對(duì)于 WebSocket 服務(wù)器，有很多選擇。對(duì)于 React 應(yīng)用程序，有一個(gè)可以直接使用的react-websocket 。


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
慕婉清6462132

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

你可以在客戶(hù)端完成


const Form = () => {

  const [buttonDisabled, setButtonDisable] = useState(false);


  // first tab fire

  const onSubmit = () => {

    .

    .

    .

    localStorage.setItem("formSubmited", "true");

  };


  useEffect(() => {

    const disableButton = (e) => {

      if (e.storageArea.formSubmited) {

        setButtonDisable(true);

      }

    };

    // second tab fire

    window.addEventListener("storage", disableButton);

    return () => {

      window.removeEventListener("storage", disableButton);

    };

  }, []);

 .

 .

 .

};


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
犯罪嫌疑人X

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

限制是它不能在不同的瀏覽器/機(jī)器上運(yùn)行。



查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 4 回答
  • 0 關(guān)注
  • 265 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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