搜尋

首頁  >  問答  >  主體

如何在Chrome檢查控制台上設定擴充功能輸入欄位的值

<p> 我嘗試在檢查控制台上設定擴展輸入欄位的值。 看起來像是設定了值,但值是無。 </p> <pre class="brush:php;toolbar:false;">var inputbox = document.querySelector('.state-styles'); inputbox.value = "blablablabla";</pre> <p>但是,輸入欄位的值在檢查元素上不會改變。 這是延伸。 我認為擴展是由react 完成的。 當OnChange事件發生時,輸入的值將會改變。我想是這樣。 那麼,我該如何設定該值? ? ? 請幫助我。 </p> <p>我想知道如何設定擴充上輸入欄位的值。 </p>
P粉685757239P粉685757239456 天前479

全部回覆(1)我來回復

  • P粉469090753

    P粉4690907532023-09-01 14:07:48

    在 React.js 中,使用 querySelector 等方法直接操作 DOM 並設定輸入元素的值可能無法反映 DOM 中的預期變更。這是因為 React 有自己的虛擬 DOM (VDOM),它可以用來有效地更新實際 DOM。

    React 鼓勵您管理元件的狀態,並讓 React 為您處理 DOM 的更新,而不是直接操作 DOM。以下是如何在 React 中實現所需行為的方法:

    使用 useState 鉤子宣告一個狀態變數:

    import React, { useState } from 'react';
    
         function MyComponent() {
            const [inputValue, setInputValue] = useState('');
    
           // ...
         }

    當你想要改變輸入框的值時,更新inputValue狀態變數:

    setInputValue("blablablabla");

    使用 inputValue 狀態變數渲染輸入元素:

    <input type="text" value={inputValue} onChange={e => 
                    setInputValue(e.target.value)} />

    透過此方法,React 將管理輸入元素的狀態,並在狀態變更時自動更新 DOM。

    回覆
    0
  • 取消回覆