mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website
This commit is contained in:
Circle CI
@@ -104,6 +104,10 @@
|
||||
<p>Summer 2017, Portland, Oregon USA</p>
|
||||
|
||||
<p><a href="https://infinite.red/ChainReactConf">Website</a> - <a href="https://twitter.com/chainreactconf">Twitter</a></p>
|
||||
<h3><a class="anchor" name="reactjs-day-2017"></a>ReactJS Day 2017 <a class="hash-link" href="#reactjs-day-2017">#</a></h3>
|
||||
<p>October 6th in Verona, Italy</p>
|
||||
|
||||
<p><a href="http://2017.reactjsday.it">Website</a> - <a href="https://twitter.com/reactjsday">Twitter</a></p>
|
||||
<h3><a class="anchor" name="react-native-eu-2017"></a>React Native EU 2017 <a class="hash-link" href="#react-native-eu-2017">#</a></h3>
|
||||
<p>Fall 2017, Poland</p>
|
||||
|
||||
|
||||
+31
-24
@@ -224,13 +224,15 @@
|
||||
|
||||
<p>Overall, this makes it so that <code><input type="text"></code>, <code><textarea></code>, and <code><select></code> all work very similarly - they all accept a <code>value</code> attribute that you can use to implement a controlled component.</p>
|
||||
<h2><a class="anchor" name="handling-multiple-inputs"></a>Handling Multiple Inputs <a class="hash-link" href="#handling-multiple-inputs">#</a></h2>
|
||||
<p>When you need to handle multiple controlled <code>input</code> elements, you can add a <code>name</code> attribute to each element and let a handler function choose what to do based on the value of <code>event.target.name</code>. For example:</p>
|
||||
<p>When you need to handle multiple controlled <code>input</code> elements, you can add a <code>name</code> attribute to each element and let the handler function choose what to do based on the value of <code>event.target.name</code>.</p>
|
||||
|
||||
<p>For example:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Reservation</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">isGoing</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
||||
<span class="nx">numberOfGuests</span><span class="o">:</span> <span class="mi">0</span>
|
||||
<span class="nx">isGoing</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
||||
<span class="nx">numberOfGuests</span><span class="o">:</span> <span class="mi">2</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleInputChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleInputChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
@@ -248,27 +250,30 @@
|
||||
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="nx">Is</span> <span class="nx">going</span><span class="o">:</span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="hll"> <span class="nx">name</span><span class="o">=</span><span class="s2">"isGoing"</span>
|
||||
</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isGoing</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleInputChange</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="nb">Number</span> <span class="nx">of</span> <span class="nx">guests</span><span class="o">:</span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="hll"> <span class="nx">name</span><span class="o">=</span><span class="s2">"numberOfGuests"</span>
|
||||
</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"number"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">numberOfGuests</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleInputChange</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="nx">form</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">label</span><span class="o">></span>
|
||||
<span class="nx">Is</span> <span class="nx">going</span><span class="o">:</span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="hll"> <span class="nx">name</span><span class="o">=</span><span class="s2">"isGoing"</span>
|
||||
</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isGoing</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleInputChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/label></span>
|
||||
<span class="o"><</span><span class="nx">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">label</span><span class="o">></span>
|
||||
<span class="nb">Number</span> <span class="nx">of</span> <span class="nx">guests</span><span class="o">:</span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="hll"> <span class="nx">name</span><span class="o">=</span><span class="s2">"numberOfGuests"</span>
|
||||
</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"number"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">numberOfGuests</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleInputChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/label></span>
|
||||
<span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/keyanzhang/pen/pRENvx?editors=0010">Try it on CodePen.</a></p>
|
||||
<p><a href="https://codepen.io/gaearon/pen/wgedvV?editors=0010">Try it on CodePen.</a></p>
|
||||
|
||||
<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>
|
||||
@@ -276,10 +281,12 @@
|
||||
</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>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">partialState</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="hll"><span class="nx">partialState</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">partialState</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Also, since <code>setState()</code> automatically <a href="/react/docs/state-and-lifecycle.html#state-updates-are-merged">merges a partial state into the current state</a>, we only needed to call it with the changed parts.</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>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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user