我是react.js的初学者,这很神奇,但我面临一个真正的问题:我需要使用普通和纯javascript设置输入的值,但形成一些原因react.js没有按预期工作。举个例子:打开这个URL http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq
您将看到有一个“电子邮件”输入字段,其ID为“CntctFrm2emailField”。我尝试使用此代码使用javascript更改它的值:
document.getElementById("CntctFrm2emailField").value = "[email protected]";
但由于某种原因,如果您尝试发送表单(单击“发送”按钮),React.js不会更新此核心原因,您将看到它将显示一条错误消息,指出电子邮件未正确填充。但是,一旦我在电子邮件字段中单击并键入任何字母并单击SEND按钮就可以正常工作,我的意思是,React.js会看到新值。
那么如何更改输入值并让React.js也更新该值呢?
我已经编写并使用此函数来触发字段的更改状态:
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' );
你应该发布你的代码,以便更好/更适合你的情况适合的答案,但一个认为可行的只是设置
defaultValue
而不是输入的value
。看看你的浏览器控制台,那就是那里的反应。
根据您的代码,您可以使用函数设置states
value
onKeyUp
或类似函数,或者在提交表单时获取新的输入值。
对于React 16,上面的解决方案无效。从GitHub检查这个issue。
function setNativeValue(element, value) {
let lastValue = element.value;
element.value = value;
let event = new Event("input", { target: element, bubbles: true });
// React 15
event.simulated = true;
// React 16
let tracker = element._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
element.dispatchEvent(event);
}
var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");
我有一个表格,我需要提交一些监控。我是这样做的:
$("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。输入.value绑定了一些额外的验证逻辑
这是你问题的关键,
但由于某种原因,React.js没有在其核心上更新此值
主要原因是反应在'影子dom'内工作,而你的
document.getElementById("CntctFrm2emailField").value = "[email protected]";
Inst以任何方式更新窗口dom对象的reacts值。
React内置了更新输入值的函数。试试这种方式。
查看此页面以获取有关反应形式的更多信息:https://facebook.github.io/react/docs/forms.html#controlled-components