在React的首页上，有一个名为"A Component Using External Plugins"的最后一个示例，其中包含一个元素：</p> </p> <pre class="brush: jscript"> <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> </pre> <p> <p>当我输入时，<textarea>元素会被更新。</p> <p>现在，我尝试用<code>value</code>替换<code>defaultValue</code>：</p> </p> <pre class="brush: jscript"> <textarea id="markdown-content" onChange={this.handleChange} value={this.state.value} /> </pre> <p> <p>结果是相同的（与<code>defaultValue</code>一样），也就是说，当我输入时，<textarea>元素在视觉上会随着更新的文本而更新。</p> <p>那么，这两者之间的真正区别是什么？</p> </div> <div class="scisco-sq-comments"> <apcomments id="comments-278597" class="have-comments"></apcomments> </div> </div> <div class="scisco-sq-vote"><div id="vote_278597" class="ap-vote net-vote" ap-vote="{"post_id":278597,"active":"","net":0,"__nonce":"993dc10738"}"><a class="apicon-thumb-up ap-tip vote-up" href="#" title="投票支持这个帖子" ap="vote_up"></a><span class="net-vote-count" data-view="ap-net-vote" itemprop="upvoteCount" ap="votes_net">0</span><a data-tipposition="bottom center" class="apicon-thumb-down ap-tip vote-down" href="#" title="对此文章投反对票" ap="vote_down"></a></div></div> </div> </div> <!-- --><!-- <span class="to-yw"><a target="_blank" rel="nofollow" href="--><!--">跳转到原文</a></span>--> </div> <apanswersw style=""> <div id="ap-answers-c"> <div class="ap-sorting-tab clearfix"> <h3 class="ap-answers-label ap-pull-left" ap="answers_count_t"> <span itemprop="answerCount">3</span> 答案 </h3> <ul id="answers-order" class="ap-answers-tab ap-ul-inline clearfix"><li class="active"><a href="https://it.jidaohang.com/question/278597/?order_by=active#answers-order">活跃</a></li><li><a href="https://it.jidaohang.com/question/278597/?order_by=voted#answers-order">已投票</a></li><li><a href="https://it.jidaohang.com/question/278597/?order_by=newest#answers-order">最新</a></li><li><a href="https://it.jidaohang.com/question/278597/?order_by=oldest#answers-order">最老的</a></li></ul> </div> <div id="answers"> <apanswers> <div id="post-371236" class="answer" apid="371236" ap="answer"> <div class="ap-content" itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer"> <div class="scisco-sq"> <div class="scisco-sq-avatar"> <a href="#/user/anonymous/about/"> <img alt='' src='https://it.jidaohang.com/wp-content/uploads/ap_avatars/049718bcc6775a43381f5f1155196470.jpg' srcset='https://it.jidaohang.com/wp-content/uploads/ap_avatars/049718bcc6775a43381f5f1155196470.jpg 2x' class='avatar avatar-50 photo avatar-default' height='50' width='50' decoding='async'/> </a> </div> <div class="scisco-sq-content-wrapper"> <div class="scisco-sq-metas"> <div class="scisco-sq-metas-left"> <span class="ap-author" itemprop="author" itemscope itemtype="http://schema.org/Person"> 匿名的 </span> <time itemprop="datePublished" datetime="2023-05-06T06:47:48+00:00"> Posted 2023年5月6日 </time> <div class="scisco-sq-metas-comment-count"> <i class="fas fa-comment"></i><span itemprop="commentCount">0</span> Comments </div> </div> <div class="scisco-sq-metas-right"> </div> </div> <div class="scisco-sq-content" itemprop="text" ap-content> <p>在React中，input元素有两个属性：value和defaultValue。value属性用于设置input元素的值，而defaultValue属性用于设置input元素的初始值。然而，这两个属性在使用时有一些差异。</p> <p>根据上述内容的描述，可以发现当使用defaultValue属性时，即使没有绑定onchange事件处理程序，也可以编辑input的值。而当使用value属性时，需要绑定onchange事件处理程序来修改input的值。</p> <p>那么，为什么会出现这个问题呢？答案在于React的工作原理。在React中，通过虚拟DOM来管理和更新页面的变化。当使用defaultValue属性时，React会将input的值视为不可变的，因此用户可以编辑输入框的值而不触发组件的重新渲染。而当使用value属性时，React会将input的值视为可变的，因此需要通过onchange事件处理程序来更新组件的状态，并重新渲染组件。</p> <p>那么，如何解决这个问题呢？解决方法就是根据需求选择合适的属性。如果需要用户能够编辑输入框的值而不触发组件的重新渲染，可以使用defaultValue属性。如果需要通过用户输入来更新组件的状态并重新渲染组件，可以使用value属性，并绑定onchange事件处理程序。</p> <p>value和defaultValue在React中的区别在于是否需要通过用户输入来更新组件的状态。根据需求选择合适的属性可以有效地解决这个问题。</p> </div> <div class="scisco-sq-comments"> <apcomments id="comments-371236" class="have-comments"></apcomments> </div> </div> <div class="scisco-sq-vote"><div id="vote_371236" class="ap-vote net-vote" ap-vote="{"post_id":371236,"active":"","net":0,"__nonce":"e4d9c4a00f"}"><a class="apicon-thumb-up ap-tip vote-up" href="#" title="投票支持这个帖子" ap="vote_up"></a><span class="net-vote-count" data-view="ap-net-vote" itemprop="upvoteCount" ap="votes_net">0</span><a data-tipposition="bottom center" class="apicon-thumb-down ap-tip vote-down" href="#" title="对此文章投反对票" ap="vote_down"></a></div></div> </div> </div> </div> <div id="post-371200" class="answer" apid="371200" ap="answer"> <div class="ap-content" itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer"> <div class="scisco-sq"> <div class="scisco-sq-avatar"> <a href="#/user/anonymous/about/"> <img alt='' src='https://it.jidaohang.com/wp-content/uploads/ap_avatars/86915a9dee0564b75aa7069673d4f9ca.jpg' srcset='https://it.jidaohang.com/wp-content/uploads/ap_avatars/86915a9dee0564b75aa7069673d4f9ca.jpg 2x' class='avatar avatar-50 photo avatar-default' height='50' width='50' decoding='async'/> </a> </div> <div class="scisco-sq-content-wrapper"> <div class="scisco-sq-metas"> <div class="scisco-sq-metas-left"> <span class="ap-author" itemprop="author" itemscope itemtype="http://schema.org/Person"> 匿名的 </span> <time itemprop="datePublished" datetime="2023-04-06T02:19:03+00:00"> Posted 2023年4月6日 </time> <div class="scisco-sq-metas-comment-count"> <i class="fas fa-comment"></i><span itemprop="commentCount">0</span> Comments </div> </div> <div class="scisco-sq-metas-right"> </div> </div> <div class="scisco-sq-content" itemprop="text" ap-content> <p>什么是React JS中value和defaultValue的真正区别？</p> <p>在React JS中，使用value和defaultValue两个属性来设置文本框或文本域的默认值。然而，这两个属性之间存在一些差异。</p> <p>通过上面给出的示例代码，我们可以看到这两个属性的用法和效果。在第一个示例中，使用了defaultValue属性来设置文本域的默认值为"foo"。而在第二个示例中，使用了value属性来设置文本域的默认值为"foo"。</p> <p>尽管在第一个示例中，我们使用了onChange事件来更新state的值（看起来像是更新了defaultValue属性），但是实际上它仍然是一个不受控制的组件，并且它的值直接从用户输入中更新。它只是在初始渲染时使用了this.state.value的默认值。</p> <p>因此，通过上述示例代码可以得出以下结论：</p> <p>- defaultValue属性适用于不受控制的组件，它只在初始渲染时设置默认值，并且不会随用户输入而更新。</p> <p>- value属性适用于受控制的组件，它可以设置默认值，并且可以通过onChange事件来更新其值。</p> <p>如果想要使用受控制的组件，可以使用value属性，并在onChange事件中更新state的值。如果仅需要设置初始值且不需要更新，可以使用defaultValue属性。</p> <p>希望以上解释能够帮助您理解React JS中value和defaultValue之间的真正区别。</p> </div> <div class="scisco-sq-comments"> <apcomments id="comments-371200" class="have-comments"></apcomments> </div> </div> <div class="scisco-sq-vote"><div id="vote_371200" class="ap-vote net-vote" ap-vote="{"post_id":371200,"active":"","net":0,"__nonce":"536e5ae789"}"><a class="apicon-thumb-up ap-tip vote-up" href="#" title="投票支持这个帖子" ap="vote_up"></a><span class="net-vote-count" data-view="ap-net-vote" itemprop="upvoteCount" ap="votes_net">0</span><a data-tipposition="bottom center" class="apicon-thumb-down ap-tip vote-down" href="#" title="对此文章投反对票" ap="vote_down"></a></div></div> </div> </div> </div> <div id="post-371196" class="answer" apid="371196" ap="answer"> <div class="ap-content" itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer"> <div class="scisco-sq"> <div class="scisco-sq-avatar"> <a href="#/user/anonymous/about/"> <img alt='' src='https://it.jidaohang.com/wp-content/uploads/ap_avatars/0cd35dc6b8266a54ba948a7fab4f51e6.jpg' srcset='https://it.jidaohang.com/wp-content/uploads/ap_avatars/0cd35dc6b8266a54ba948a7fab4f51e6.jpg 2x' class='avatar avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> </a> </div> <div class="scisco-sq-content-wrapper"> <div class="scisco-sq-metas"> <div class="scisco-sq-metas-left"> <span class="ap-author" itemprop="author" itemscope itemtype="http://schema.org/Person"> 匿名的 </span> <time itemprop="datePublished" datetime="2023-06-02T23:57:39+00:00"> Posted 2023年6月2日 </time> <div class="scisco-sq-metas-comment-count"> <i class="fas fa-comment"></i><span itemprop="commentCount">0</span> Comments </div> </div> <div class="scisco-sq-metas-right"> </div> </div> <div class="scisco-sq-content" itemprop="text" ap-content> <p>React中的value和defaultValue属性有什么真正的区别？</p> <p>在React中，value属性和defaultValue属性在使用上有所不同。当你改变value属性所使用的值时，它们之间不会有任何区别。但是如果你不更新变量并且设置了textarea的value值，那么你无法通过键入来更改textarea的值。而使用defaultValue属性，你就不需要更新任何变量。</p> <p>这意味着在没有onChange处理程序的情况下，使用defaultValue属性的<textarea defaultValue={initialValue}/>允许我改变输入值（未受控组件），而不允许我改变输入值（受控组件），对吗？
是的，要使用value={..}属性来改变值，你需要分配一个onChange处理程序。
用户名或邮箱地址
密码
