How to set the value of an extension input field on Chrome inspection console

Question

I try to set the value of an extended input field on the inspection console. It looks like the value is set, but the value is None.

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

However, the value of the input field does not change on the inspected element. This is a stretch. I think scaling is done by react. When the OnChange event occurs, the input value will change. I think so. So, how do I set this value? ? ? please help me.

I would like to know how to set the value of an input field on an extension.

Answer 1

In React.js, using methods such as querySelector to directly manipulate the DOM and set the value of an input element may not reflect the expected changes in the DOM. This is because React has its own virtual DOM (VDOM) which it can use to efficiently update the real DOM.

React encourages you to manage the state of your components and let React handle updates to the DOM for you, rather than manipulating the DOM directly. Here's how to achieve the desired behavior in React:

Use the useState hook to declare a state variable:

import React, { useState } from 'react';

     function MyComponent() {
        const [inputValue, setInputValue] = useState('');

       // ...
     }

When you want to change the value of the input box, update the inputValue state variable:

setInputValue("blablablabla");

Use the inputValue state variable to render the input element:

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

With this approach, React will manage the state of the input elements and automatically update the DOM when the state changes.