首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >输入的React.js设定值

输入的React.js设定值
EN

Stack Overflow用户
提问于 2015-06-06 21:48:49
回答 5查看 37.9K关注 0票数 24

我是react.js的初学者,它很神奇,但我面临着一个真正的问题:我需要使用普通的纯javascript设置输入的值,但由于某种原因react.js不能像预期的那样工作。举个例子:打开这个URL http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

您将看到有一个id为"CntctFrm2emailField“的"Email”输入字段。我试着用javascript用下面的代码改变它的值:

document.getElementById("CntctFrm2emailField").value = "testing@gmail.com";

但是由于某些原因,React.js没有在其核心原因上更新此值,如果您尝试发送表单(单击send按钮),您将看到它将显示一条错误消息,指出电子邮件未正确填写。但是,一旦我在电子邮件字段中单击,输入任意字母,然后单击发送按钮,它就能正常工作,我的意思是,React.js会看到新值。

那么,如何更改输入值并让React.js也更新该值呢?

EN

回答 5

Stack Overflow用户

发布于 2018-09-25 04:31:29

对于React 16,使用以下代码。检查this 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");
票数 30
EN

Stack Overflow用户

发布于 2016-11-11 22:17:29

我已经编写并使用此函数来触发字段的更改状态:

function doEvent( obj, event ) {
    /* Created by David@Refoua.me */
    var event = new Event( event, {target: obj, bubbles: true} );
    return obj ? obj.dispatchEvent(event) : false;
}

像这样使用它:

var el = document.getElementById("CntctFrm2emailField");
el.value = "testing@gmail.com";
doEvent( el, 'input' );
票数 16
EN

Stack Overflow用户

发布于 2017-01-20 04:34:33

我有一张表格,我需要提交以进行一些监控。我是这样做的:

$("input[type=email]").value = "me@something.com"
$("input[type=email]").defaultValue = "me@something.com"
$("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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30683628

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档