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

Question

我嘗試在檢查控制台上設定擴展輸入欄位的值。看起來像是設定了值，但值是無。 varinputbox=document.querySelector('.state-styles');inputbox.value="blablablabla";但是，輸入欄位的值在檢查元素上不會改變。這是延伸。我認為擴展是由react完成的。當OnChange事件發生時，輸入的值將會改變。我想是這樣。那

P粉469090753 · Answer

在 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 狀態變數渲染輸入元素：

 
                setInputValue(e.target.value)} />

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