Question

我是react.js的初学者，这很神奇，但我面临一个真正的问题：我需要使用普通和纯javascript设置输入的值，但形成某种原因react.js没有按预期工作。举个例子：打开此网址http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

您将看到有一个“电子邮件”输入字段，其ID为“CntctFrm2emailField”。我尝试使用此代码使用javascript更改它的值：

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

但由于某些原因，如果您尝试发送表单（单击“发送”按钮），React.js不会更新此核心原因，您将看到它将显示一条错误消息，指出电子邮件未正确填充。但是，一旦我在电子邮件字段中单击并键入任何字母并单击SEND按钮就可以正常工作，我的意思是，React.js会看到新值。

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

Answer 1

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

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

Answer 2

你应该发布你的代码，以便更好/更适合你的情况适合的答案，但有人认为这样做只是设置

defaultValue

而不是输入的value。看看你的浏览器控制台，那里会有什么反应。

根据您的代码，您可以使用函数设置 states value onKeyUp或类似内容，或者在提交表单时获取新的输入值。

Answer 3

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

Answer 4

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

$("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。输入.value

绑定了一些额外的验证逻辑

Answer 5

这是你问题的关键，

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

主要原因是反应在影子dom＆＃39;和你的

中起作用

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

Inst以任何方式更新reacts值只是窗口dom对象。

React内置了更新输入值的函数。试试这个。

查看此页面以获取有关反应表单的更多信息： https://facebook.github.io/react/docs/forms.html#controlled-components

Answer 6

首先，永远不要使用React.js中的“ document”对象。这是一个很大的不。您也不应该访问DOM元素，但是，如果您知道自己在做什么（例如动画），则应该创建“ ref”对象（不在主题范围内）以访问DOM元素。

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

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

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

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" />

Answer 7

如果输入的内容不是html格式，则应采用以下方式：

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

这应该有效

React.js设置输入值

7 个答案: