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

Question

我嘗試在檢查控制台上設定擴展輸入欄位的值。 看起來像是設定了值，但值是無。

var inputbox = document.querySelector('.state-styles');
inputbox.value = "blablablabla";

但是，輸入欄位的值在檢查元素上不會改變。 這是延伸。 我認為擴展是由react 完成的。 當OnChange事件發生時，輸入的值將會改變。我想是這樣。 那麼，我該如何設定該值？ ？ ？ 請幫助我。

我想知道如何設定擴充上輸入欄位的值。

Answer 1

在 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。