Cara menetapkan nilai medan input sambungan pada konsol pemeriksaan Chrome

Question

Saya cuba menetapkan nilai medan input lanjutan pada konsol pemeriksaan. Nampaknya nilai telah ditetapkan, tetapi nilainya ialah Tiada.

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

Walau bagaimanapun, nilai medan input tidak berubah pada elemen yang diperiksa. Ini adalah regangan. Saya fikir penskalaan dilakukan dengan bertindak balas. Apabila peristiwa OnChange berlaku, nilai input akan berubah. Saya rasa begitu. Jadi, bagaimana saya menetapkan nilai ini? ? ? tolong saya.

Saya ingin tahu cara menetapkan nilai medan input pada sambungan.

Answer 1

Dalam React.js, menggunakan kaedah seperti querySelector untuk memanipulasi DOM secara langsung dan menetapkan nilai elemen input mungkin tidak menggambarkan perubahan yang dijangkakan dalam DOM. Ini kerana React mempunyai DOM maya (VDOM) sendiri yang boleh digunakan untuk mengemas kini DOM sebenar dengan cekap.

React menggalakkan anda mengurus keadaan komponen anda dan membiarkan React mengendalikan kemas kini DOM untuk anda, dan bukannya memanipulasi DOM secara langsung. Begini cara untuk mencapai tingkah laku yang diingini dalam React:

Isytihar pembolehubah keadaan menggunakan cangkuk useState:

import React, { useState } from 'react';

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

       // ...
     }

Apabila anda ingin menukar nilai kotak input, kemas kini pembolehubah keadaan inputValue:

setInputValue("blablablabla");

Gunakan pembolehubah keadaan inputValue untuk memaparkan elemen input:

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

Dengan pendekatan ini, React akan mengurus keadaan elemen input dan mengemas kini DOM secara automatik apabila keadaan berubah.