mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
858 lines
66 KiB
HTML
858 lines
66 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Forms - React</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:title" content="Forms - React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/forms.html">
|
|
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
|
<meta property="fb:app_id" content="623268441017527">
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script src="/react/js/html5shiv.min.js"></script>
|
|
<script src="/react/js/es5-shim.min.js"></script>
|
|
<script src="/react/js/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
|
<script src="/react/js/codemirror.js"></script>
|
|
<script src="/react/js/javascript.js"></script>
|
|
<script src="/react/js/xml.js"></script>
|
|
<script src="/react/js/jsx.js"></script>
|
|
<script src="/react/js/react.js"></script>
|
|
<script src="/react/js/react-dom.js"></script>
|
|
<script src="/react/js/babel.min.js"></script>
|
|
<script src="/react/js/live_editor.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<div class="nav-lists">
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/hello-world.html" class="active">Docs</a></li>
|
|
<li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
|
|
<li><a href="/react/community/support.html">Community</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
<li class="nav-site-search">
|
|
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
|
</li>
|
|
</ul>
|
|
<ul class="nav-site nav-site-external">
|
|
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
|
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="inner-content">
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/forms.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
Forms
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<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>There are two types of form components:</p>
|
|
|
|
<ul>
|
|
<li>Controlled Components</li>
|
|
<li>Uncontrolled Components</li>
|
|
</ul>
|
|
|
|
<p>You can jump directly to <a href="/react/docs/forms.html#examples">examples</a>.</p>
|
|
<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="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>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="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="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="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">"Hello!"</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="p">);</span>
|
|
</code></pre></div>
|
|
<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="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>
|
|
|
|
<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 <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>
|
|
|
|
<p>An <strong>uncontrolled</strong> component manages its own state.</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="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. 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="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="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">"Hello!"</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="p">);</span>
|
|
</code></pre></div>
|
|
<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>
|
|
<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">defaultValue</span><span class="o">=</span><span class="s2">"Hello!"</span> <span class="o">/></span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>Likewise, <code><input type="checkbox"></code> and <code><input type="radio"></code> support <code>defaultChecked</code>, and <code><select></code> supports <code>defaultValue</code>.</p>
|
|
<h2><a class="anchor" name="interactive-props"></a>Interactive Props <a class="hash-link" href="#interactive-props">#</a></h2>
|
|
<p>Form components support a few props that are affected via user interactions:</p>
|
|
|
|
<ul>
|
|
<li><code>value</code>, supported by <code><input></code> and <code><textarea></code> components.</li>
|
|
<li><code>checked</code>, supported by <code><input></code> components of type <code>checkbox</code> or <code>radio</code>.</li>
|
|
<li><code>selected</code>, supported by <code><option></code> components.</li>
|
|
</ul>
|
|
|
|
<p>In HTML, the value of <code><textarea></code> is set via children. In React, you should use <code>value</code> instead.</p>
|
|
|
|
<p>Form components allow listening for changes by setting a callback to the <code>onChange</code> prop. The <code>onChange</code> prop works across browsers to fire in response to user interactions when:</p>
|
|
|
|
<ul>
|
|
<li>The <code>value</code> of <code><input></code> or <code><textarea></code> changes.</li>
|
|
<li>The <code>checked</code> state of <code><input></code> changes.</li>
|
|
<li>The <code>selected</code> state of <code><option></code> changes.</li>
|
|
</ul>
|
|
|
|
<p>Like all DOM events, the <code>onChange</code> prop is supported on all native components and can be used to listen to bubbled change events.</p>
|
|
|
|
<blockquote>
|
|
<p>Note:</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>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"title"</span> <span class="na">value=</span><span class="s">"Untitled"</span> <span class="nt">/></span>
|
|
</code></pre></div>
|
|
<p>This renders an input <em>initialized</em> with the value, <code>Untitled</code>. When the user updates the input, the node's <code>value</code> <em>property</em> will change. However, <code>node.getAttribute('value')</code> will still return the value used at initialization time, <code>Untitled</code>.</p>
|
|
|
|
<p>Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:</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">name</span><span class="o">=</span><span class="s2">"title"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Untitled"</span> <span class="o">/></span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<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"><!-- 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>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <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="s2">"This is a description."</span> <span class="o">/></span>
|
|
</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 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>
|
|
</code></pre></div>
|
|
<p>To make an uncontrolled component, <code>defaultValue</code> is used instead.</p>
|
|
|
|
<blockquote>
|
|
<p>Note:</p>
|
|
|
|
<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>
|
|
<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="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="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="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="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="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="p">);</span>
|
|
</code></pre></div>
|
|
<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="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="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="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>
|
|
<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">textarea</span>
|
|
<span class="nx">name</span><span class="o">=</span><span class="s2">"description"</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="p">);</span>
|
|
</code></pre></div>
|
|
<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="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="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="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="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="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="p">);</span>
|
|
</code></pre></div>
|
|
<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="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="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="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">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">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="p">);</span>
|
|
</code></pre></div>
|
|
<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="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="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">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="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">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">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>
|
|
<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">
|
|
|
|
<a class="docs-prev" href="/react/docs/state-and-lifecycle.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/lifting-state-up.html">Next →</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/installation.html">Installation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/hello-world.html">Hello World</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/introducing-jsx.html">Introducing JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/rendering-elements.html">Rendering Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/components-and-props.html">Components and Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/state-and-lifecycle.html">State and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/handling-events.html">Handling Events</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/conditional-rendering.html">Conditional Rendering</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lists-and-keys.html">Lists and Keys</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html" class="active">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lifting-state-up.html">Lifting State Up</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking In React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Advanced Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX In Depth</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/refs-and-the-dom.html">Refs and the DOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/optimizing-performance.html">Optimizing Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-es6.html">React Without ES6</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-jsx.html">React Without JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/web-components.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-api.html">React</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-component.html">React.Component</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom.html">ReactDOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom-server.html">ReactDOMServer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-elements.html">DOM Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">SyntheticEvent</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/addons.html">Add-Ons</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/perf.html">Performance Tools</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/update.html">Immutability Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/two-way-binding-helpers.html">Two-way Binding Helpers</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Contributing Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Contributing</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/implementation-notes.html">Implementation Notes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/design-principles.html">Design Principles</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<footer class="nav-footer">
|
|
<section class="sitemap">
|
|
<a href="/react/" class="nav-home">
|
|
</a>
|
|
<div>
|
|
<h5><a href="/react/docs/">Docs</a></h5>
|
|
<a href="/react/docs/hello-world.html">Quick Start</a>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
<a href="/react/tutorial/tutorial.html">Tutorial</a>
|
|
<a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Community</a></h5>
|
|
<a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
|
|
<a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
|
|
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
|
|
<a href="https://www.facebook.com/react" target="_blank">Facebook</a>
|
|
<a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Resources</a></h5>
|
|
<a href="/react/community/conferences.html">Conferences</a>
|
|
<a href="/react/community/videos.html">Videos</a>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
|
|
</div>
|
|
<div>
|
|
<h5>More</h5>
|
|
<a href="/react/blog/">Blog</a>
|
|
<a href="https://github.com/facebook/react" target="_blank">GitHub</a>
|
|
<a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
</section>
|
|
<a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
|
|
<img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
|
|
</a>
|
|
<section class="copyright">
|
|
Copyright © 2016 Facebook Inc.
|
|
</section>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<div id="fb-root"></div>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
(function(d, s, id) {
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return;
|
|
js = d.createElement(s); js.id = id;
|
|
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
docsearch({
|
|
apiKey: '36221914cce388c46d0420343e0bb32e',
|
|
indexName: 'react',
|
|
inputSelector: '#algolia-doc-search'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|