mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Paul O’Shannessy
547 lines
29 KiB
HTML
547 lines
29 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>表单组件 | React</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="表单组件 | React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="http://facebook.github.io/react/docs/forms-zh-CN.html">
|
|
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
|
|
|
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
|
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
|
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
|
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
|
<script type="text/javascript" src="/react/js/react.js"></script>
|
|
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
|
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
|
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/index.html">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<ul class="nav-site">
|
|
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
|
<li><a href="/react/support.html">support</a></li>
|
|
<li><a href="/react/downloads.html">download</a></li>
|
|
<li><a href="/react/blog/">blog</a></li>
|
|
<li><a href="http://github.com/facebook/react">github</a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/getting-started.html">Getting Started</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tutorial.html">Tutorial</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Community Resources</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/videos.html">Videos</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/examples.html">Examples</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/why-react.html">Why React?</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/addons.html">Add-Ons</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/clone-with-props.html">Cloning Components</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/perf.html">Performance Tools</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-api.html">Component API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">Event System</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Flux</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Tips Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Tips</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/tips/introduction.html">Introduction</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/references-to-components.html">References to Components</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inner-content">
|
|
<h1>
|
|
表单组件
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/07-forms.zh-CN.md" target="_blank">Edit on GitHub</a>
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<p>诸如 <code><input></code>、<code><textarea></code>、<code><option></code> 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。</p>
|
|
|
|
<p>关于 <code><form></code> 事件详情请查看 <a href="/react/docs/events.html#form-events">表单事件</a>。</p>
|
|
<h2><a class="anchor" name=""></a>交互属性 <a class="hash-link" href="#">#</a></h2>
|
|
<p>表单组件支持几个受用户交互影响的属性：</p>
|
|
|
|
<ul>
|
|
<li><code>value</code>，用于 <code><input></code>、<code><textarea></code> 组件。</li>
|
|
<li><code>checked</code>，用于类型为 <code>checkbox</code> 或者 <code>radio</code> 的 <code><input></code> 组件。</li>
|
|
<li><code>selected</code>，用于 <code><option></code> 组件。</li>
|
|
</ul>
|
|
|
|
<p>在 HTML 中，<code><textarea></code> 的值通过子节点设置；在 React 中则应该使用 <code>value</code> 代替。 </p>
|
|
|
|
<p>表单组件可以通过 <code>onChange</code> 回调函数来监听组件变化。当用户做出以下交互时，<code>onChange</code> 执行并通过浏览器做出响应：</p>
|
|
|
|
<ul>
|
|
<li><code><input></code> 或 <code><textarea></code> 的 <code>value</code> 发生变化时。</li>
|
|
<li><code><input></code> 的 <code>checked</code> 状态改变时。</li>
|
|
<li><code><option></code> 的 <code>selected</code> 状态改变时。</li>
|
|
</ul>
|
|
|
|
<p>和所有 DOM 事件一样，所有的 HTML 原生组件都支持 <code>onChange</code> 属性，而且可以用来监听冒泡的 <code>change</code> 事件。 </p>
|
|
<h2><a class="anchor" name=""></a>受限组件 <a class="hash-link" href="#">#</a></h2>
|
|
<p>设置了 <code>value</code> 的 <code><input></code> 是一个<em>受限</em>组件。 对于受限的 <code><input></code>，渲染出来的 HTML 元素始终保持 <code>value</code> 属性的值。例如：</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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="p">}</span>
|
|
</code></pre></div>
|
|
<p>上面的代码将渲染出一个值为 <code>Hello!</code> 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 <code>Hello!</code>。如果想响应更新用户输入的值，就得使用 <code>onChange</code> 事件：</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</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">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">value</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="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="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="p">;</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>上面的代码中，React 将用户输入的值更新到 <code><input></code> 组件的 <code>value</code> 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</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="p">}</span>
|
|
</code></pre></div>
|
|
<p>上面的代码接受用户输入，并截取前 140 个字符。</p>
|
|
<h2><a class="anchor" name=""></a>不受限组件 <a class="hash-link" href="#">#</a></h2>
|
|
<p>没有设置 <code>value</code>(或者设为 <code>null</code>) 的 <code><input></code> 组件是一个<em>不受限</em>组件。对于不受限的 <code><input></code> 组件，渲染出来的元素直接反应用户输入。例如：</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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>上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 <code>onChange</code> 事件可以监听值的变化。</p>
|
|
|
|
<p>如果想给组件设置一个非空的初始值，可以使用 <code>defaultValue</code> 属性。例如：</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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>上面的代码渲染出来的元素和<strong>受限组件</strong>一样有一个初始值，但这个值用户可以改变并会反应到界面上。</p>
|
|
|
|
<p>同样地， 类型为 <code>radio</code>、<code>checkbox</code> 的<code><input></code> 支持 <code>defaultChecked</code> 属性， <code><select></code> 支持 <code>defaultValue</code> 属性。</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">"opt"</span> <span class="nx">defaultChecked</span> <span class="o">/></span> <span class="nx">Option</span> <span class="mi">1</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">"opt"</span> <span class="o">/></span> <span class="nx">Option</span> <span class="mi">2</span>
|
|
<span class="o"><</span><span class="nx">select</span> <span class="nx">defaultValue</span><span class="o">=</span><span class="s2">"C"</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="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="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div><h2><a class="anchor" name=""></a>高级主题 <a class="hash-link" href="#">#</a></h2><h3><a class="anchor" name=""></a>为什么使用受限组件？ <a class="hash-link" href="#">#</a></h3>
|
|
<p>在 React 中使用诸如 <code><input></code> 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。</p>
|
|
|
|
<p>比如下面的代码： </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>在 HTML 中将渲染初始值为 <code>Untitled</code> 的输入框。用户改变输入框的值时，节点的 <code>value</code> 属性（<em>property</em>）将随之变化，但是 <code>node.getAttribute('value')</code> 还是会返回初始设置的值 <code>Untitled</code>.</p>
|
|
|
|
<p>与 HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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>该方法在任何时间点渲染组件以后，输入框的值就应该<em>始终</em>为 <code>Untitled</code>。</p>
|
|
<h3><a class="anchor" name="-lttextareagt--value-"></a>为什么 <code><textarea></code> 使用 <code>value</code> 属性？ <a class="hash-link" href="#-lttextareagt--value-">#</a></h3>
|
|
<p>在 HTML 中， <code><textarea></code> 的值通常使用子节点设置：</p>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="c"><!-- 反例：在 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>对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符限制，可以使用 <code>\n</code> 实现换行。简言之，React 已经有 <code>value</code>、<code>defaultValue</code> 属性，<code></textarea></code> 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 <code><textarea></code> 值时不应该使用子节点：</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>如果<em>非要</em>*使用子节点，效果和使用 <code>defaultValue</code> 一样。</p>
|
|
<h3><a class="anchor" name="-ltselectgt--value-"></a>为什么 <code><select></code> 使用 <code>value</code> 属性 <a class="hash-link" href="#-ltselectgt--value-">#</a></h3>
|
|
<p>HTML 中 <code><select></code> 通常使用 <code><option></code> 的 <code>selected</code> 属性设置选中状态；React 为了更方面的控制组件，采用以下方式代替：</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>
|
|
<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>如果是不受限组件，则使用 <code>defaultValue</code>。</p>
|
|
|
|
<blockquote>
|
|
<p>注意：</p>
|
|
|
|
<p>给 <code>value</code> 属性传递一个数组，可以选中多个选项：<code><select multiple={true} value={['B', 'C']}></code>。</p>
|
|
</blockquote>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
<a class="docs-prev" href="/react/docs/transferring-props-zh-CN.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/working-with-the-browser-zh-CN.html">Next →</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="wrap">
|
|
<div class="left">
|
|
A Facebook & Instagram collaboration.<br>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
<div class="right">
|
|
© 2013–2015 Facebook Inc.<br>
|
|
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
|
</div>
|
|
</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/all.js#xfbml=1&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
</script>
|
|
</body>
|
|
</html>
|