mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website manually
This commit is contained in:
Dan Abramov
+1
-1
@@ -103,7 +103,7 @@
|
||||
|
||||
<p>As of v0.14, returning <code>false</code> from an event handler will no longer stop event propagation. Instead, <code>e.stopPropagation()</code> or <code>e.preventDefault()</code> should be triggered manually, as appropriate.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="event-pooling"></a>Event pooling <a class="hash-link" href="#event-pooling">#</a></h3>
|
||||
<h3><a class="anchor" name="event-pooling"></a>Event Pooling <a class="hash-link" href="#event-pooling">#</a></h3>
|
||||
<p>The <code>SyntheticEvent</code> is pooled. This means that the <code>SyntheticEvent</code> object will be reused and all properties will be nullified after the event callback has been invoked.
|
||||
This is for performance reasons.
|
||||
As such, you cannot access the event in an asynchronous way.</p>
|
||||
|
||||
+203
-91
@@ -80,7 +80,7 @@
|
||||
|
||||
<p>Form components such as <code><input></code>, <code><textarea></code>, and <code><option></code> differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.</p>
|
||||
|
||||
<p>Two types of form components:</p>
|
||||
<p>There are two types of form components:</p>
|
||||
|
||||
<ul>
|
||||
<li>Controlled Components</li>
|
||||
@@ -91,24 +91,30 @@
|
||||
<h2><a class="anchor" name="controlled-components"></a>Controlled Components <a class="hash-link" href="#controlled-components">#</a></h2>
|
||||
<p>A <strong>controlled</strong> form component provides a <code>value</code> prop. A <strong>controlled</strong> component does not maintain its own internal state; the component renders purely based on props.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Hello!"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="hll"> <span class="nx">value</span><span class="o">=</span><span class="s2">"Hello!"</span> <span class="o">/></span>
|
||||
</span> <span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>User input has no effect on the rendered element because React has declared the value to be "Hello!". To update the value in response to user input, you would use the onChange event:</p>
|
||||
<p>If you try to run this example, you will notice that the input doesn't change as you type. This is because the component has declared the input's <code>value</code> to always be <code>"Hello!"</code>.</p>
|
||||
|
||||
<p>To update the value in response to user input, you would use the <code>onChange</code> event to save the new value, then pass that to the <code>value</code> prop of the input:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">value</span><span class="o">:</span> <span class="s2">""</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">value</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Text field value is: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Text field value is: '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -116,28 +122,44 @@
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Hello!"</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">value</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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="hll"> <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">value</span><span class="p">}</span>
|
||||
</span><span class="hll"> <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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/QKkJva?editors=0010">Try it on CodePen.</a></p>
|
||||
<p><a href="https://codepen.io/gaearon/pen/NRmBmq?editors=0010">Try it on CodePen.</a></p>
|
||||
|
||||
<p>In this example, we are accepting the value provided by the user and updating the <code>value</code> prop of the <code><input></code> component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">140</span><span class="p">)});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">140</span><span class="p">)</span>
|
||||
</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This would accept user input and truncate the value to the first 140 characters.</p>
|
||||
<h3><a class="anchor" name="potential-issues-with-checkboxes-and-radio-buttons"></a>Potential Issues With Checkboxes and Radio Buttons <a class="hash-link" href="#potential-issues-with-checkboxes-and-radio-buttons">#</a></h3>
|
||||
<p>Be aware that, in an attempt to normalize change handling for checkbox and radio inputs, React uses a <code>click</code> event in place of a <code>change</code> event. For the most part this behaves as expected, except when calling <code>preventDefault</code> in a <code>change</code> handler. <code>preventDefault</code> stops the browser from visually updating the input, even if <code>checked</code> gets toggled. This can be worked around either by removing the call to <code>preventDefault</code>, or putting the toggle of <code>checked</code> in a <code>setTimeout</code>.</p>
|
||||
|
||||
<p>Controlled components also let us reset inputs to arbitrary values by setting the state:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">handleClearClick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">value</span><span class="o">:</span> <span class="s1">''</span>
|
||||
</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name="potential-issues-with-checkboxes-and-radio-buttons"></a>Potential Issues With Checkboxes and Radio Buttons <a class="hash-link" href="#potential-issues-with-checkboxes-and-radio-buttons">#</a></h3>
|
||||
<p>Be aware that, in an attempt to normalize change handling for checkbox and radio inputs, React listens to a <code>click</code> browser event to implement the <code>onChange</code> event.</p>
|
||||
|
||||
<p>For the most part this behaves as expected, except when calling <code>preventDefault</code> in a <code>change</code> handler. <code>preventDefault</code> stops the browser from visually updating the input, even if <code>checked</code> gets toggled. This can be worked around either by removing the call to <code>preventDefault</code>, or putting the toggle of <code>checked</code> in a <code>setTimeout</code>.</p>
|
||||
<h2><a class="anchor" name="uncontrolled-components"></a>Uncontrolled Components <a class="hash-link" href="#uncontrolled-components">#</a></h2>
|
||||
<p>Form components that do not provide a <code>value</code> prop are <em>uncontrolled</em>.</p>
|
||||
<p>Form components that do not provide a <code>value</code> prop are <strong>uncontrolled</strong>.</p>
|
||||
|
||||
<p>The example below renders an <code><input></code> control with an empty value. Any user input will be immediately reflected by the rendered element.</p>
|
||||
|
||||
@@ -146,39 +168,48 @@
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>If you wanted to listen to updates to the value, you could use the <code>onChange</code> event just like you can with controlled components.</p>
|
||||
<p>If you wanted to listen to updates to the value, you could use the <code>onChange</code> event just like you can with controlled components. However, you would <em>not</em> pass the value you saved to the component.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">value</span><span class="o">:</span> <span class="s2">""</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">value</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Note: with uncontrolled inputs, you don't</span>
|
||||
<span class="c1">// have to put the value in the state.</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Text field value is: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Text field value is: '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<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="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Hello!"</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">value</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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/XjxyoL?editors=0010">Try it on CodePen.</a></p>
|
||||
<p><a href="https://codepen.io/gaearon/pen/pEBOJR?editors=0010">Try it on CodePen.</a></p>
|
||||
|
||||
<p>While this example puts value in the state so we can later read it in <code>handleSubmit()</code>, uncontrolled form components don't require this. You may completely omit an <code>onChange</code> handler and instead read the input value using <a href="/react/docs/refs-and-the-dom.html">DOM references</a>, an advanced feature discussed later.</p>
|
||||
<h3><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h3>
|
||||
<p>To initialize an uncontrolled component with a non-empty value, you can supply a <code>defaultValue</code> prop.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -210,7 +241,7 @@
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>For <code><input></code> and <code><textarea></code>, <code>onChange</code> should generally used instead of — the DOM's built-in <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput"><code>oninput</code></a> event handler.</p>
|
||||
<p>For <code><input></code> and <code><textarea></code>, <code>onChange</code> should generally be used instead of the DOM's built-in <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput"><code>oninput</code></a> event handler.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="advanced-topics"></a>Advanced Topics <a class="hash-link" href="#advanced-topics">#</a></h2><h3><a class="anchor" name="why-controlled-components"></a>Why Controlled Components? <a class="hash-link" href="#why-controlled-components">#</a></h3>
|
||||
<p>Using form components such as <code><input></code> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:</p>
|
||||
@@ -226,7 +257,7 @@
|
||||
<p>Since this method describes the view at any point in time, the value of the text input should <em>always</em> be <code>Untitled</code>.</p>
|
||||
<h3><a class="anchor" name="why-textarea-value"></a>Why Textarea Value? <a class="hash-link" href="#why-textarea-value">#</a></h3>
|
||||
<p>In HTML, the value of <code><textarea></code> is usually set using its children:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="c"><!-- antipattern: DO NOT DO THIS! --></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="c"><!-- Don't do this in React. --></span>
|
||||
<span class="nt"><textarea</span> <span class="na">name=</span><span class="s">"description"</span><span class="nt">></span>This is the description.<span class="nt"></textarea></span>
|
||||
</code></pre></div>
|
||||
<p>For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use <code>\n</code> if we want newlines. In a world where we have <code>value</code> and <code>defaultValue</code>, it is ambiguous what role children play. For this reason, you should not use children when setting <code><textarea></code> values:</p>
|
||||
@@ -234,9 +265,9 @@
|
||||
</code></pre></div>
|
||||
<p>If you <em>do</em> decide to use children, they will behave like <code>defaultValue</code>.</p>
|
||||
<h3><a class="anchor" name="why-select-value"></a>Why Select Value? <a class="hash-link" href="#why-select-value">#</a></h3>
|
||||
<p>The selected <code><option></code> in an HTML <code><select></code> is normally specified through that option's <code>selected</code> attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="o"><</span><span class="nx">select</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span><span class="o">></span><span class="nx">Apple</span><span class="o"><</span><span class="err">/option></span>
|
||||
<p>The selected <code><option></code> in an HTML <code><select></code> is normally specified through that option's <code>selected</code> attribute. In React we assign the <code>select</code> component a specific value by passing a <code>value</code> prop:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"> <span class="o"><</span><span class="nx">select</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span><span class="o">></span>
|
||||
</span> <span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span><span class="o">></span><span class="nx">Apple</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span><span class="o">></span><span class="nx">Banana</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"C"</span><span class="o">></span><span class="nx">Cranberry</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="err">/select></span>
|
||||
@@ -248,53 +279,62 @@
|
||||
|
||||
<p>You can pass an array into the <code>value</code> attribute, allowing you to select multiple options in a <code>select</code> tag: <code><select multiple={true} value={['B', 'C']}></code>.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="imperative-operations"></a>Imperative operations <a class="hash-link" href="#imperative-operations">#</a></h3>
|
||||
<h3><a class="anchor" name="imperative-operations"></a>Imperative Operations <a class="hash-link" href="#imperative-operations">#</a></h3>
|
||||
<p>If you need to imperatively perform an operation, you have to obtain a <a href="/react/docs/more-about-refs.html#the-ref-callback-attribute">reference to the DOM node</a>.
|
||||
For instance, if you want to imperatively submit a form, one approach would be to attach a <code>ref</code> to the <code>form</code> element and manually call <code>form.submit()</code>.</p>
|
||||
<h2><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h2><h3><a class="anchor" name="basic-text-input"></a>Basic Text Input <a class="hash-link" href="#basic-text-input">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<h2><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h2><h3><a class="anchor" name="controlled-input"></a>Controlled Input <a class="hash-link" href="#controlled-input">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">value</span><span class="o">:</span> <span class="s2">""</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">value</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Text field value is: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Text field value is: '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<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="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"edit me"</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">value</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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="nx">placeholder</span><span class="o">=</span><span class="s2">"edit me"</span>
|
||||
<span class="hll"> <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">value</span><span class="p">}</span>
|
||||
</span><span class="hll"> <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">handleChange</span><span class="p">}</span>
|
||||
</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/JRmZjz?editors=0010">Try this on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="basic-textarea"></a>Basic Textarea <a class="hash-link" href="#basic-textarea">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<p><a href="https://codepen.io/gaearon/pen/JRVaYB?editors=0010">Try it out on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="controlled-textarea"></a>Controlled Textarea <a class="hash-link" href="#controlled-textarea">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">value</span><span class="o">:</span> <span class="s2">""</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">value</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Textarea value is: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Textarea value is: '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -302,55 +342,66 @@ For instance, if you want to imperatively submit a form, one approach would be t
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">textarea</span>
|
||||
<span class="nx">name</span><span class="o">=</span><span class="s2">"description"</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">value</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">handleChange</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="hll"> <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">value</span><span class="p">}</span>
|
||||
</span><span class="hll"> <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">handleChange</span><span class="p">}</span>
|
||||
</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/kkAQPp?editors=0010">Try this on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="basic-select"></a>Basic Select <a class="hash-link" href="#basic-select">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<p><a href="https://codepen.io/gaearon/pen/NRmLxN?editors=0010">Try it out on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="controlled-select"></a>Controlled Select <a class="hash-link" href="#controlled-select">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">value</span><span class="o">:</span> <span class="s2">"B"</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">value</span><span class="o">:</span> <span class="s1">'B'</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Select value is: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Select value is: '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<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="o"><</span><span class="nx">select</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">value</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">handleChange</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span><span class="o">></span><span class="nx">Apple</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">select</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">value</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">handleChange</span><span class="p">}</span><span class="o">></span>
|
||||
</span> <span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span><span class="o">></span><span class="nx">Apple</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span><span class="o">></span><span class="nx">Banana</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"C"</span><span class="o">></span><span class="nx">Cranberry</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="err">/select></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/pExQbL?editors=0010">Try this on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="basic-radio-button"></a>Basic Radio Button <a class="hash-link" href="#basic-radio-button">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<p><a href="https://codepen.io/gaearon/pen/qawrbr?editors=0010">Try it out on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="uncontrolled-radio-button"></a>Uncontrolled Radio Button <a class="hash-link" href="#uncontrolled-radio-button">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">value</span><span class="o">:</span> <span class="s2">"B"</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">value</span><span class="o">:</span> <span class="s1">'B'</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@@ -360,67 +411,128 @@ For instance, if you want to imperatively submit a form, one approach would be t
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Radio button value is: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Radio button value is: '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<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="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"radio"</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"choice"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</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">handleChange</span><span class="p">}</span> <span class="o">/></span> <span class="nx">Option</span> <span class="nx">A</span><span class="o"><</span><span class="nx">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"radio"</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"choice"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</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">handleChange</span><span class="p">}</span> <span class="nx">defaultChecked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span> <span class="nx">Option</span> <span class="nx">B</span><span class="o"><</span><span class="nx">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"radio"</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"choice"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"C"</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">handleChange</span><span class="p">}</span> <span class="o">/></span> <span class="nx">Option</span> <span class="nx">C</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="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"radio"</span>
|
||||
<span class="nx">name</span><span class="o">=</span><span class="s2">"choice"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="nx">Option</span> <span class="nx">A</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">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="nx">label</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"radio"</span>
|
||||
<span class="nx">name</span><span class="o">=</span><span class="s2">"choice"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span>
|
||||
</span><span class="hll"> <span class="nx">defaultChecked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="nx">Option</span> <span class="nx">B</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="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"radio"</span>
|
||||
<span class="nx">name</span><span class="o">=</span><span class="s2">"choice"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"C"</span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="nx">Option</span> <span class="nx">C</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">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/WGaYVg?editors=0010">Try this on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="basic-checkbox"></a>Basic Checkbox <a class="hash-link" href="#basic-checkbox">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<p><a href="https://codepen.io/gaearon/pen/ozOPLJ?editors=0010">Try it out on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="uncontrolled-checkbox"></a>Uncontrolled Checkbox <a class="hash-link" href="#uncontrolled-checkbox">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Form</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">checked</span><span class="o">:</span> <span class="p">[</span><span class="s2">"B"</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">checked</span><span class="o">:</span> <span class="p">{</span><span class="s1">'A'</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="s1">'B'</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s1">'C'</span><span class="o">:</span> <span class="kc">false</span><span class="p">}};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleChange</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">let</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
|
||||
<span class="kd">let</span> <span class="nx">checked</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">checked</span><span class="p">.</span><span class="nx">slice</span><span class="p">();</span> <span class="c1">// copy</span>
|
||||
<span class="k">if</span><span class="p">(</span><span class="nx">checked</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">val</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nx">checked</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">checked</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">val</span><span class="p">),</span> <span class="mi">1</span><span class="p">);</span>
|
||||
<span class="kr">const</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
|
||||
<span class="c1">// Copy the object so we don't mutate the old state.</span>
|
||||
<span class="c1">// (This requires an Object.assign polyfill):</span>
|
||||
<span class="kr">const</span> <span class="nx">checked</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</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">checked</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">checked</span><span class="p">[</span><span class="nx">value</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="nx">checked</span><span class="p">[</span><span class="nx">value</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">checked</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">checked</span><span class="o">:</span> <span class="nx">checked</span><span class="p">})</span>
|
||||
<span class="nx">checked</span><span class="p">[</span><span class="nx">value</span><span class="p">]</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">checked</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s2">"Boxes checked are: '"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">checked</span> <span class="o">+</span> <span class="s2">"'"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Boxes 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">checked</span><span class="p">.</span><span class="nx">A</span> <span class="o">?</span> <span class="s1">'A '</span> <span class="o">:</span> <span class="s1">''</span><span class="p">)</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">checked</span><span class="p">.</span><span class="nx">B</span> <span class="o">?</span> <span class="s1">'B '</span> <span class="o">:</span> <span class="s1">''</span><span class="p">)</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">checked</span><span class="p">.</span><span class="nx">C</span> <span class="o">?</span> <span class="s1">'C'</span> <span class="o">:</span> <span class="s1">''</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<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="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</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">handleChange</span><span class="p">}</span> <span class="o">/></span> <span class="nx">Option</span> <span class="nx">A</span><span class="o"><</span><span class="nx">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</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">handleChange</span><span class="p">}</span> <span class="nx">defaultChecked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span> <span class="nx">Option</span> <span class="nx">B</span><span class="o"><</span><span class="nx">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"C"</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">handleChange</span><span class="p">}</span> <span class="o">/></span> <span class="nx">Option</span> <span class="nx">C</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="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="nx">Option</span> <span class="nx">A</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">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="nx">label</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span>
|
||||
</span><span class="hll"> <span class="nx">defaultChecked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="nx">Option</span> <span class="nx">B</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="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"C"</span>
|
||||
<span class="hll"> <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">handleChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="nx">Option</span> <span class="nx">C</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">br</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Submit</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/ericnakagawa/pen/kkAzPO?editors=0010">Try it on CodePen.</a></p>
|
||||
<h3><a class="anchor" name="form-events"></a>Form Events <a class="hash-link" href="#form-events">#</a></h3>
|
||||
<p>Event names:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">onChange onInput onSubmit
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Form</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://codepen.io/gaearon/pen/rrbkWz?editors=0010">Try it on CodePen.</a></p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
@@ -191,7 +191,7 @@
|
||||
|
||||
<span class="kd">function</span> <span class="nx">NumberList</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kr">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>
|
||||
<span class="kr">const</span> <span class="nx">listItems</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span>
|
||||
<span class="kr">const</span> <span class="nx">listItems</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">number</span><span class="p">)</span> <span class="o">=></span>
|
||||
<span class="hll"> <span class="c1">// Wrong! The key should have been specified here:</span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">ListItem</span> <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="p">);</span>
|
||||
|
||||
@@ -93,13 +93,13 @@
|
||||
|
||||
<p>In practice, these assumptions are valid for almost all practical use cases.</p>
|
||||
<h2><a class="anchor" name="the-diffing-algorithm"></a>The Diffing Algorithm <a class="hash-link" href="#the-diffing-algorithm">#</a></h2>
|
||||
<p>When diffing two trees, React first compares the the two root elements. The behavior is different depending on the types of the root elements.</p>
|
||||
<p>When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.</p>
|
||||
<h3><a class="anchor" name="elements-of-different-types"></a>Elements Of Different Types <a class="hash-link" href="#elements-of-different-types">#</a></h3>
|
||||
<p>Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from <code><a></code> to <code><img></code>, or from <code><Article></code> to <code><Comment></code>, or from <code><Button></code> to <code><div></code> - any of those will lead to a full rebuild.</p>
|
||||
|
||||
<p>When tearing down a tree, old DOM nodes are destroyed. Component instances receive <code>componentWillUnmount()</code>. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive <code>componentWillMount()</code> and then <code>componentDidMount()</code>. Any state associated with the old tree is lost.</p>
|
||||
|
||||
<p>Any componts below the root will also get unmounted and have their state destroyed. For example, when diffing:</p>
|
||||
<p>Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:</p>
|
||||
<div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><div></span>
|
||||
<span class="nt"><Counter</span> <span class="nt">/></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
@@ -171,9 +171,9 @@
|
||||
</blockquote>
|
||||
|
||||
<hr>
|
||||
<h3><a class="anchor" name="renderintodocument"></a><code>renderIntoDocument()</code> <a class="hash-link" href="#renderintodocument">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">renderIntoDocument</span><span class="p">(</span><span class="nx">instance</span><span class="p">)</span>
|
||||
<h3><a class="anchor" name="renderintodocument"></a><code>renderIntoDocument()</code> <a class="hash-link" href="#renderintodocument">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">renderIntoDocument</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>Render a component into a detached DOM node in the document. <strong>This function requires a DOM.</strong></p>
|
||||
<p>Render a React element into a detached DOM node in the document. <strong>This function requires a DOM.</strong></p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
@@ -458,8 +458,8 @@
|
||||
</code></pre></div>
|
||||
<p>Its <code>handleClick</code> can push a new entry onto the stack by concatenating the new history entry to make a new history array:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">handleClick</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">history</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">history</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">history</span><span class="p">[</span><span class="nx">history</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
|
||||
<span class="kr">const</span> <span class="nx">history</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">history</span><span class="p">;</span>
|
||||
<span class="kr">const</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">history</span><span class="p">[</span><span class="nx">history</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
|
||||
<span class="kr">const</span> <span class="nx">squares</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">squares</span><span class="p">.</span><span class="nx">slice</span><span class="p">();</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">calculateWinner</span><span class="p">(</span><span class="nx">squares</span><span class="p">)</span> <span class="o">||</span> <span class="nx">squares</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="k">return</span><span class="p">;</span>
|
||||
|
||||
Reference in New Issue
Block a user