Comment définir la valeur d'un champ de saisie d'extension sur la console d'inspection Chrome

Question

J'essaie de définir la valeur d'un champ de saisie étendu sur la console d'inspection. Il semble que la valeur soit définie, mais la valeur est Aucune.

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

Cependant, la valeur du champ de saisie ne change pas sur l'élément inspecté. C'est un tronçon. Je pense que la mise à l'échelle se fait par réaction. Lorsque l'événement OnChange se produit, la valeur d'entrée change. Je pense que oui. Alors, comment définir cette valeur ? ? ? S'il vous plaît aidez-moi.

J'aimerais savoir comment définir la valeur d'un champ de saisie sur une extension.

Answer 1

Dans React.js, l'utilisation de méthodes telles que querySelector pour manipuler directement le DOM et définir la valeur d'un élément d'entrée peut ne pas refléter les changements attendus dans le DOM. En effet, React possède son propre DOM virtuel (VDOM) qu'il peut utiliser pour mettre à jour efficacement le DOM réel.

React vous encourage à gérer l'état de vos composants et à laisser React gérer les mises à jour du DOM pour vous, plutôt que de manipuler directement le DOM. Voici comment obtenir le comportement souhaité dans React :

Déclarez une variable d'état à l'aide du hook useState :

import React, { useState } from 'react';

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

       // ...
     }

Lorsque vous souhaitez modifier la valeur de la zone de saisie, mettez à jour la variable d'état inputValue :

setInputValue("blablablabla");

Utilisez la variable d'état inputValue pour restituer l'élément d'entrée :

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

Avec cette approche, React gérera l'état de l'élément d'entrée et mettra automatiquement à jour le DOM lorsque l'état change.