我是 react.js 的初学者，这很了不起，但我面临一个真正的问题：我需要使用普通和纯 javascript 设置输入的值，但出于某种原因，react.js 无法按预期工作。举个例子：打开这个网址http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq
您将看到有一个“电子邮件”输入字段，其 ID 为“CntctFrm2emailField”。我尝试使用带有以下代码的 javascript 更改它的值：
document.getElementById("CntctFrm2emailField").value = "testing@gmail.com";
但是由于某种原因，React.js 并没有在其核心原因上更新此值，如果您尝试发送表单（单击“发送”按钮），您将看到它会显示一条错误消息，指出电子邮件未正确填写。但是，一旦我在电子邮件字段内单击并键入任何字母并单击“发送”按钮，它就可以正常工作，我的意思是，React.js 会看到新值。
那么如何更改输入值并让 React.js 也更新该值呢？
对于 React 16，请使用以下代码。检查这个问题。
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");
我已经编写并使用此函数来触发字段的更改状态：
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' );
您应该发布您的代码以获得更好/更适合您情况的答案，但有人认为这只是设置
defaultValue
而不是value输入。看看你的浏览器控制台，这就是 react 会在那里记录的内容。
根据您的代码，您可以使用函数设置或类似，或者在提交表单时获取新的输入值。states value onKeyUp
我有一个表格需要提交以进行一些监控。我是这样做的：
$("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
首先，你永远不应该在 React.js 中使用“文档”对象。这是一个很大的不。你也不应该访问 DOM 元素，但是如果你知道你在做什么（比如动画），你应该创建“ref”对象，这是主题之外的，来访问 DOM 元素。
首先，您应该在表单的状态对象内有一个对象。假设您的表单中有“用户名”和“密码”字段。
state={form:{username:"","password:""}
因为输入字段有自己的状态，所以我们在那里输入的任何内容都将存储在输入字段中。我们应该摆脱输入字段的状态，只依赖状态对象。我们希望拥有单一的事实来源，因此将“输入”转换为“受控元素”。受控元素没有自己的状态，它们通过 props 获取所有数据，并通过引发事件通知数据的更改。我们正在使用“value”props来设置输入值。由于输入字段被初始化为空字符串，我们将无法在输入字段中输入内容。解决方案是我们必须动态处理输入字段的更改事件。
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" />