blocks|key|4496647|text|我已经编写并使用此函数来触发字段的更改状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4496648|function+doEvent(+obj,+event+)+{
++++/*+Created+by+David@Refoua.me+*/
++++var+event+=+new+Event(+event,+{target:+obj,+bubbles:+true}+);
++++return+obj+?+obj.dispatchEvent(event)+:+false;
}|code-block|syntax|javascript|4496649|像这样使用它：|4496650|var+el+=+document.getElementById("CntctFrm2emailField");
el.value+=+"testing@gmail.com";
doEvent(+el,+'input'+);|4496651|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I have written and use this function to trigger the change state for the field:

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

Use it like this:

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

blocks|key|4496672|text|我有一张表格，我需要提交以进行一些监控。我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4496673|$("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()|code-block|syntax|javascript|4496674|请注意，对于我登录的网站，我必须同时设置value和defaultValue。有一些额外的验证逻辑被绑定到input.value|4496675|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had a form that I needed to submit for some monitoring. I did it like this:

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

Note that for the website I was logging into, I had to set both value and defaultValue. There was some extra validation logic bound to the input.value

blocks|key|4495892|text|对于React+16，使用以下代码。检查this+issue。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4495893|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");|code-block|syntax|javascript|4495894|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react/issues/11488^0|K|A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

For React 16, use following code. Check <a href="https://github.com/facebook/react/issues/11488" rel="nofollow noreferrer">this issue</a>.
<pre><code>function setNativeValue(element, value) {
 let lastValue = element.value;
 element.value = value;
 let event = new Event(&quot;input&quot;, { 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(&quot;ID OF ELEMENT&quot;);
setNativeValue(input, &quot;VALUE YOU WANT TO SET&quot;);
</code></pre>

blocks|key|4496772|text|首先，永远不要在React.js中使用"document“对象。这是一个很大的不。你也不应该访问DOM元素，但是如果你知道你在做什么(比如动画)，你应该创建"ref“对象来访问DOM元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4496773|首先，在表单的state对象中应该有一个对象。假设您的表单中有“用户名”和“密码”字段。|4496774|state={form:{username:"","password:""}|code-block|syntax|javascript|4496775|因为输入字段有自己的状态，所以我们在其中键入的任何内容都将存储在输入字段中。我们应该摆脱输入域的状态，只依赖于状态对象。我们希望有单一的真理来源，因此将“输入”转换为“受控元素”。受控元素没有自己的状态，它们通过属性获取所有数据，并通过引发事件来通知数据的更改。我们使用"+value“属性来设置输入值。由于输入字段被初始化为空字符串，我们将无法在输入字段中键入内容。解决方案是我们必须动态处理输入字段的更改事件。|4496776|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"+/>|4496777|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

First of all, you should never ever work with "document" object in React.js. It is a big no no. You should not access DOM element neither, but if you know what you are doing(like animations) you should create "ref" object, which is off the topic, to access DOM element.

First thing you should have an object inside the state object for your form. Lets say you have "username" and "password" fields in your form.

<pre><code>state={form:{username:"","password:""}
</code></pre>

Because input fields have their own state, whatever we type in there will be stored in the input field. We should get rid of the state of input field and only rely on the state object. We want to have single source of truth so convert "input" to “controlled element”. Controlled elements do not have their own state, they get all data, via props and they notify changes to the data by raising events. We are using "value" prop to set inputs value. 
Since input fields are initialized as empty strings, we will not be able to type something inside input field. Solution is we have to handle the change event for input fields dynamically.

<pre><code>handleChange=e=&gt;{
 const form={...this.state.form}
 form[e.currentTarget.name]=e.currentTarget.value
 this.setState({account})}

&lt;input value={this.state.form.username} change={this.handleChange} name="username"/&gt;
&lt;input value={this.state.form.password} change={this.handleChange} name="password" /&gt;
</code></pre>

blocks|key|4496799|text|如果输入不是html表单，那么您应该这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4496800|document.getElementById("CntctFrm2emailField")[0].value+=+"testing@gmail.com";|offset|length|style|CODE|4496801|这应该是可行的|4496802|entityMap^0|0|0|26|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

if the input is not in a html form, then you should do it this way:

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

This should work

I am a beginner with react.js and it's amazing but I am facing a real problem: I need to set the value of an input using plain and pure javascript but form some reason react.js is not working as expected. Take this example: open this URL <a href="http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq">http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq</a>

You will see there is an "Email" input field which id is "CntctFrm2emailField". I try to change the value of it using javascript with this code:

<pre><code>document.getElementById("CntctFrm2emailField").value = "testing@gmail.com";
</code></pre>

But for some reason React.js is not updating this value on its core cause if you try to send the form (Clicking the SEND button) you will see that it will display an error message saying that email is not filled right. BUT once I click inside the email field and type any letter and click the SEND button it works fine, I mean, React.js sees the new value.

So how can I change an input value and have React.js to update that value too?

React.js setting value of input

我是react.js的初学者，它很神奇，但我面临着一个真正的问题:我需要使用普通的纯javascript设置输入的值，但由于某种原因react.js不能像预期的那样工作。举个例子:打开这个URL 您将看到有一个id为"CntctFrm2emailField“的"Email”输入字段。我试着用javascript用下面的...

问输入的React.js设定值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入的React.js设定值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入的React.js设定值
EN