React.js 设置输入值

Posted 2023-03-05

【中文标题】React.js 设置输入值

【英文标题】：React.js setting value of input

【发布时间】：2015-08-21 09:55:11

【问题描述】：

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

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

document.getElementById("CntctFrm2emailField").value = "[e-mail]";

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

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

【问题讨论】：

如果您在其他cmets中提到的代码无法发布，我担心您的问题不适合本网站，建议您删除它。

【参考方案1】：

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

【讨论】：

._valueTracker 是语言本身的一部分还是 react 的助手？

AFAIK 不是 JavaScript 或标准 DOM 属性的一部分

只模拟点击怎么样？这行不通，因为我们没有输入权？

【参考方案2】：

如果输入不是html形式，那么你应该这样做：

document.getElementById("CntctFrm2emailField")[0].value = "[e-mail]";

这应该可以工作

【讨论】：

这在几个方面都是错误的。首先 getElementById() 不会返回类似数组的对象，因此 [0] 下标将导致未定义，并在尝试访问 value 时触发异常。其次，正如其他答案所述，简单地设置由 React 呈现的字段元素的 value 属性是行不通的。

【参考方案3】：

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

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

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

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

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

【参考方案4】：

我需要提交一个表单以进行一些监控。我是这样做的：

$("input[type=email]").value = "[e-mail]"
$("input[type=email]").defaultValue = "[e-mail]"
$("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 绑定了一些额外的验证逻辑

【参考方案5】：

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

function doEvent( obj, event ) 
    /* Created by [e-mail] */
    var event = new Event( event, target: obj, bubbles: true );
    return obj ? obj.dispatchEvent(event) : false;

像这样使用它：

var el = document.getElementById("CntctFrm2emailField");
el.value = "[e-mail]";
doEvent( el, 'input' );

【参考方案6】：

这是你问题的关键，

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

主要原因是 react 在“shadow dom”中工作，而你的

document.getElementById("CntctFrm2emailField").value = "[e-mail]";

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

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

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

【讨论】：

感谢您向我解释，确实有一个带有反应的“虚拟 dom”，这就是让它如此快速的原因。但我认为我需要的是在该输入中触发更改事件。我已经尝试过使用普通的 javascript .onchange() 进行调整，但它不起作用。我想我需要用 react.js 来触发它。你能帮我解决这个问题吗？我不敢相信使用 react.js 更新输入值是如此困难

如果您需要帮助，我需要查看代码...但是，查看站点，整个表单是一个名为 ContactForm 的反应组件，输入事件也由反应处理（@ 987654324@)。你用的是js还是jsx？

我很想向您展示代码，但我不知道这个表单是如何编程的，因为我今天第一次听说 react.js。我什至没有在电子邮件输入周围看到

jmingov 我研究了您提供的链接，但没有运气。我一整天都在研究这个，但我仍然无法以 react.js 更新值的方式触发 change 事件。

这个答案只涵盖了 OP 和我已经知道的内容。它并没有解决访问“虚拟dom”值并改变它的问题。

【参考方案7】：

您应该发布您的代码以获得更好/更适合您的情况的答案，但一个认为可行的方法就是设置

defaultValue

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

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

【讨论】：

感谢@michael。很抱歉没有发布代码，但我不是那个网站的人，我只是添加了一些功能，代码是一团糟。但是看，我尝试了你的建议，但它不起作用 -> document.getElementById("CntctFrm2emailField").defaultValue = "[e-mail]"; .我认为出于某种原因我需要触发该输入的 onchange 事件，因为我认为 react.js 正在侦听 onchange 事件以更新内部值。我已经尝试过用 js 触发 onchange() 事件，但它也不起作用。也许有某种方法可以通过 react 触发更改事件？

谢谢！没有意识到这个道具存在。

@ArtemAliev 为什么不问另一个问题来解决您的具体问题，而不是在没有任何解释的情况下投票和抱怨？如您所见，此答案适用于数百人，因此您应该考虑到是您无法使其发挥作用，而不是答案...