Я использую Chrome DevTools для проверки веб-приложения React. В приложении есть кнопка загрузки со скрытым полем ввода. Я пытаюсь сделать поле ввода видимым (и повторяемым) двумя различными способами:
1) На вкладке Элементы я нахожу тег ввода HTML и нажимаю на него. На панели «Стили» справа я вижу, что к элементу применен стиль CSS, который устанавливает «display: none! Важный;». Когда я снимаю флажок с этой строки на панели «Стили», стиль отключается, и на странице появляется элемент ввода (и я могу щелкнуть по нему, чтобы открыть средство выбора файлов). Пока что все это имеет для меня смысл.
2) На вкладке «Источники» я создаю новый фрагмент и программно меняю стиль отображения того же элемента:
form = ...
input = form.getElementsByTagName('input')[0];
console.log(input);
computedStyle = getComputedStyle(input);
console.log(computedStyle['display']);
input.style.setProperty("display", "inline", "important")
console.log(computedStyle['display']);
Когда Я запускаю это, вывод на консоль имеет смысл: я подтверждаю, что я нахожу правильный элемент, при первом выводе на дисплей его «нет», а второй раз - «встроенный». Однако на странице ничего не меняется, я не вижу входных данных, как в другом подходе.
Я все еще оборачиваюсь вокруг React, и я подозреваю, что это связано с тем, что React может и решит воссоздавать фактические элементы DOM очень часто (поэтому, возможно, изменяемый ввод не является вводом, который я вижу?) Но я не супер ясен, и в любом случае я ожидал, что эти два подхода дадут одинаковые результаты. Что здесь происходит? И как я могу программно изменить скрытый ввод, чтобы он не был скрыт?