Chrome 検査コンソールで拡張機能入力フィールドの値を設定する方法

Question

検査コンソールの拡張入力フ​​ィールドの値を設定してみます。 値が設定されているように見えますが、値は None です。

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

ただし、検査された要素の入力フィールドの値は変更されません。 これはストレッチです。 スケーリングはreactによって行われると思います。 OnChange イベントが発生すると、入力値が変化します。そう思います。 では、この値はどのように設定すればよいのでしょうか? ? ? 私を助けてください。

拡張機能の入力フィールドの値を設定する方法を知りたいです。

Answer 1

React.js では、querySelector などのメソッドを使用して DOM を直接操作し、入力要素の値を設定すると、DOM に予期された変更が反映されない可能性があります。これは、React が実際の DOM を効率的に更新するために使用できる独自の仮想 DOM (VDOM) を備えているためです。

React では、DOM を直接操作するのではなく、コンポーネントの状態を管理し、DOM の更新を React に処理させることをお勧めします。 React で望ましい動作を実現する方法は次のとおりです:

useState フックを使用して状態変数を宣言します:

リーリー

入力ボックスの値を変更する場合は、inputValue 状態変数を更新します。

リーリー

inputValue 状態変数を使用して入力要素をレンダリングします:

リーリー

このアプローチでは、React は入力要素の状態を管理し、状態が変化したときに DOM を自動的に更新します。