Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild website

Browse Source
This commit is contained in:
Circle CI
2017-01-23 10:35:15 -08:00
parent 451cb4c623
commit 9c7bb68d01
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/forms.html
+11 -1
View File
@@ -269,7 +269,17 @@
<span class="p">}</span>
</code></pre></div>
<p><a href="https://codepen.io/keyanzhang/pen/pRENvx?editors=0010">Try it on CodePen.</a></p>
<h2><a class="anchor" name="alternatives-to-controlled-components"></a>Alternatives to Controlled Components <a class="hash-link" href="#alternatives-to-controlled-components">#</a></h2>
<p>Note how we used the ES6 <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">computed property name</a> syntax to update the state key corresponding to the given input name:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
<span class="hll"> <span class="p">[</span><span class="nx">name</span><span class="p">]</span><span class="o">:</span> <span class="nx">value</span>
</span><span class="p">});</span>
</code></pre></div>
<p>It is equivalent to this ES5 code:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">nextState</span> <span class="o">=</span> <span class="p">{};</span>
<span class="hll"><span class="nx">nextState</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
</span><span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">nextState</span><span class="p">);</span>
</code></pre></div><h2><a class="anchor" name="alternatives-to-controlled-components"></a>Alternatives to Controlled Components <a class="hash-link" href="#alternatives-to-controlled-components">#</a></h2>
<p>It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out <a href="/react/docs/uncontrolled-components.html">uncontrolled components</a>, an alternative technique for implementing input forms.</p>