Chrome 검사 콘솔에서 확장 입력 필드 값을 설정하는 방법

Question

검사 콘솔의 확장 입력 필드 값을 설정하려고 합니다. 값이 설정된 것처럼 보이지만 값이 없음입니다.

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

그러나 입력 필드의 값은 검사된 요소에서 변경되지 않습니다. 이것은 스트레칭입니다. 스케일링은 반응에 의해 수행된다고 생각합니다. OnChange 이벤트가 발생하면 입력값이 변경됩니다. 그렇게 생각해요. 그렇다면 이 값을 어떻게 설정해야 할까요? ? ? 도와주세요.

확장 프로그램의 입력 필드 값을 설정하는 방법을 알고 싶습니다.

Answer 1

React.js에서는 querySelector와 같은 메서드를 사용하여 DOM을 직접 조작하고 입력 요소의 값을 설정하면 예상되는 DOM 변경 사항이 반영되지 않을 수 있습니다. 이는 React가 실제 DOM을 효율적으로 업데이트하는 데 사용할 수 있는 자체 가상 DOM(VDOM)을 가지고 있기 때문입니다.

React는 구성 요소의 상태를 관리하고 DOM을 직접 조작하는 대신 React가 DOM 업데이트를 처리하도록 권장합니다. React에서 원하는 동작을 달성하는 방법은 다음과 같습니다.

useState 후크를 사용하여 상태 변수를 선언합니다.

으아악

입력 상자의 값을 변경하려면 inputValue 상태 변수를 업데이트하세요.

으아악

inputValue 상태 변수를 사용하여 입력 요소를 렌더링합니다.

으아악

이 접근 방식을 사용하면 React는 입력 요소의 상태를 관리하고 상태가 변경되면 자동으로 DOM을 업데이트합니다.