Значение React.js для ввода

Я начинаю с response.js, и это потрясающе, но у меня есть реальная проблема: мне нужно установить значение ввода с использованием простого и чистого javascript, но по какой-то причине реакция .js не работает должным образом. Возьмите этот пример: откройте этот URL http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

Вы увидите, что есть поле ввода "Электронная почта", идентификатором которого является "CntctFrm2emailField". Я пытаюсь изменить его значение с помощью javascript с помощью этого кода:

document.getElementById("CntctFrm2emailField").value = "[email protected]";

Но по какой-то причине React.js не обновляет это значение по своей основной причине, если вы попытаетесь отправить форму (нажав кнопку SEND), вы увидите, что на экране появится сообщение об ошибке, в котором говорится, что письмо не заполнено правильно. НО, как только я нажимаю внутри поля электронной почты и набираю любую букву и нажимаю кнопку SEND, она работает нормально, я имею в виду, React.js видит новое значение.

Итак, как я могу изменить входное значение и React.js также обновить это значение?

Ответ 1

Вы должны опубликовать свой код, чтобы получить лучшую/более подходящую для вашей ситуации ответную реакцию, но, думаю, что будет работать, просто установите

defaultValue

вместо value ввода. Взгляните на консоль браузеров, чтобы они реагировали.

В зависимости от вашего кода вы можете установить states value onKeyUp или подобное с помощью функции или получить новое значение ввода при отправке формы.

Ответ 2

Я написал и использую эту функцию для запуска состояния изменения для поля:

function doEvent( obj, event ) {
    /* Created by [email protected] */
    var event = new Event( event, {target: obj, bubbles: true} );
    return obj ? obj.dispatchEvent(event) : false;
}

Используйте его следующим образом:

var el = document.getElementById("CntctFrm2emailField");
el.value = "[email protected]";
doEvent( el, 'input' );

Ответ 3

У меня была форма, которую мне нужно было отправить для некоторого мониторинга. Я сделал это так:

$("input[type=email]").value = "[email protected]"
$("input[type=email]").defaultValue = "[email protected]"
$("input[type=password]").value = "mystellarpassword"
$("input[type=password]").defaultValue = "pinpmystellarpasswordss"
$("input[type=email]").dispatchEvent(new Event('input', {target: $("input[type=email]"), bubbles: true} ));
$("input[type=password]").dispatchEvent(new Event('input', {target: $("input[type=password]"), bubbles: true} ));
$("button.login").click()

Обратите внимание, что для веб-сайта, в который я входил, мне нужно было установить значение value и defaultValue. Существовала некоторая дополнительная логика проверки, связанная с input.value

Ответ 4

Это ключ к вашему вопросу,

Но по какой-то причине React.js не обновляет это значение на своем ядре

Основная причина заключается в том, что реакция работает в "теневом доме", а ваш

document.getElementById("CntctFrm2emailField").value = "[email protected]";

Инспектор обновляет значение реакции любым способом только для объекта dom dom.

React имеет встроенные функции для обновления значения ввода. Попробуйте это.

Проверьте эту страницу для получения дополнительной информации об реагирующих формах: https://facebook.github.io/react/docs/forms.html#controlled-components