Javascript React.js输入的设置值

我是react.js的初学者，这很令人惊讶，但我面临着一个真正的问题：我需要使用纯javascript设置输入值，但出于某种原因react.js无法按预期工作。举个例子：打开这个URL

您将看到一个“Email”输入字段，其id为“cntctfrm2memailfield”。我尝试通过以下代码使用javascript更改它的值：

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

但由于某些原因，React.js没有更新其核心值，因为如果您尝试发送表单（单击“发送”按钮），您将看到它将显示一条错误消息，说明电子邮件未正确填写。但是，一旦我在email字段中单击并键入任何信件，然后单击SEND按钮，它就会正常工作，我的意思是，React.js会看到新的值

---

那么，我如何才能更改输入值并让React.js也更新该值呢？

您应该发布代码，以获得更好/更适合您的情况的答案，但有人认为，只需设置

defaultValue

而不是输入的值。看看你的浏览器控制台，这就是react将在那里记录的内容

---

根据您的代码，您可以使用函数设置

状态

值

onKeyUp

或类似设置，或在提交表单时获取新输入值

这是你问题的关键

但由于某些原因，React.js没有在其核心上更新此值

主要原因是react在“影子dom”中工作，并且

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

Inst以任何方式更新reacts值，只更新windowdom对象

React内置了更新输入值的函数。试着那样做

有关react表单的更多信息，请查看此页面：

---

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

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' );

$("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()

---

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

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

$("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。有一些额外的验证逻辑绑定到输入。上述React 16解决方案的值不起作用。从GitHub检查这个

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");

---

首先，永远不要使用React.js中的“document”对象。这是一个很大的禁忌。你也不应该访问DOM元素，但是如果你知道你在做什么（比如动画），你应该创建“ref”对象来访问DOM元素，这是离题的

首先，您应该在表单的state对象中有一个对象。假设表单中有“用户名”和“密码”字段

state={form:{username:"","password:""}

因为输入字段有自己的状态，所以我们在其中键入的任何内容都将存储在输入字段中。我们应该摆脱输入字段的状态，只依赖状态对象。我们希望有单一的真相来源，所以将“输入”转换为“受控元素”。受控元素没有自己的状态，它们通过道具获取所有数据，并通过引发事件通知对数据的更改。我们使用“值”道具来设置输入值。 由于输入字段被初始化为空字符串，我们将无法在输入字段中键入内容。解决方案是我们必须动态处理输入字段的更改事件

handleChange=e=>{
    const form={...this.state.form}
    form[e.currentTarget.name]=e.currentTarget.value
    this.setState({account})}

<input value={this.state.form.username} change={this.handleChange} name="username"/>
<input value={this.state.form.password} change={this.handleChange} name="password" />

handleChange=e=>{
const form={…this.state.form}
形式[e.currentTarget.name]=e.currentTarget.value
this.setState（{account}）}

如果输入不是html格式，则应按以下方式执行：

document.getElementById（“CntctFrm2emailField”）[0]。值=“testing@gmail.com";

这应该行得通
谢谢@michael。很抱歉没有发布代码，但我不是那个网站的创建者，我只是添加了一些功能，代码乱七八糟。但是你看，我尝试了你的建议，但它不起作用->document.getElementById（“cntctfrm2memailfield”）。defaultValue=“testing@gmail.com";    . 我想我需要出于某种原因触发输入的onchange事件，因为我认为react.js正在侦听onchange事件以更新内部值。我已经尝试过用js触发onchange（）事件，但它不起作用。也许有什么方法可以用react触发这个变化事件？谢谢！没有意识到这个道具的存在。@ArtemAliev你为什么不提出另一个问题来解决你的具体问题，而不是在没有任何解释的情况下否决投票和抱怨？正如你所看到的，这个答案适用于数百人，所以你应该认为是你不能让它工作，而不是答案…谢谢你解释我，确实有一个“虚拟DOM”的反应，这是什么使它如此之快。但我认为我需要的是在输入中触发更改事件。我已经尝试过用纯javascript.onchange（）打印它，但它不起作用。我想我需要用react.js启动它。你能帮我做这个吗？我不敢相信使用react.js更新输入值这么难如果您需要帮助，我需要查看代码。。。但是，从站点上看，整个表单是一个名为
ContactForm
的react组件，输入事件也由react处理（
onclick&&onchange
）。你使用的是js还是jsx？我很想向你展示代码，但我不知道这个表单是如何编程的，因为我今天第一次听说react.js。我甚至没有看到电子邮件输入周围的标签。在浏览器中，您是否看到表单？我现在触发了onclick和onchange，不幸的是它不起作用了……还有其他想法吗？我只想设置电子邮件输入的值，就这样！我想设置这个值，我想让react.js识别这个值。jmingov我研究了你提供的链接，但运气不好。我花了一整天的时间研究这个问题，但我仍然无法以react.js更新值的方式触发更改事件。这个答案只涵盖OP和我已经知道的内容。它不能解决访问“虚拟dom”值并对其进行更改的问题