列表与组件的键值

首先让我们看看在JavaScript中我们是如何处理一个列表的：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

例子中使用map方法将每个元素的值*2，最后得到的数组为：[2, 4, 6, 8, 10]。在React中，处理组件数组的方式与之类似。

渲染多个组件

下面的例子，我们使用map()方法来创建组件中的一系列元素：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}li>
);

listItem就是一个包含多个

标签的组件。然后我们将listItem用

标签包裹起来并在浏览器呈现：

ReactDOM.render(
  <ul>{listItems}ul>,
  document.getElementById('root')
);

通过类似的方法，我们可以使用数组来创建一系列元素。

基于列表的组件

大部分情况，我们希望在一个组件中完成一个列表元素的渲染。将前面的例子稍加修改：

//构建组件
function NumberList(props) {
  const numbers = props.numbers;
  //根据输入的参数获取一个标签的列表
  const listItems = numbers.map((number) =>
    <li>{number}li>
  );
  //用
      
      
       
       包裹
       
       并返回
  return (
    <ul>{listItems}ul>
  );
}
//设置输入参数
const numbers = [1, 2, 3, 4, 5];
//渲染组件
ReactDOM.render(
  <NumberList numbers={numbers} />,  document.getElementById('root') );

当我们执行这个例子的代码时，会发现在浏览器中输出一个警告：" a key should be provided for list items"。"键值（Key）"在创建列表元素时是一个附加的属性，下一节会详细说明使用它的原因。

通过number.map()方法向组建中的元素增加键值：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //根据number输出设置li的key
    
      {number}
    </li>
  );
  return (
    
      
      
       
       {listItems}l>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

键值的使用

在React中，键值（keys）用来标记那些元素被修改了。在使用数组时，应该给数组元素标记键值以便于批量更新的效率：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  li>
);

最好使用一个字符串来表示key值，并且确保兄弟节点之间的唯一性。例如使用业务id作为键值：

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  li>
);

在某些情况下无法获取到合理的id值，可以直接使用列表索引：

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  li>
);

如果列表中的元素可以重新排序，建议不要使用索引作为键值，这样会导致渲染缓慢。如果你对键值（keys）的使用有浓厚的兴趣，参看：in-depth explanation about why keys are necessary。

使用键值扩展组件

键值仅仅在最外层列表中存在意义。例如，如果想抽取出一个名为ListItem的组件，最好在上标记key值，而不是组件中的

元素上。

下面是一些错误使用键值的例子：

function ListItem(props) {
  const value = props.value;
  //不应该在这里使用键值
  return (
    <li key={value.toString()}>
      {value}
    li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  /**建议在这里使用并标记键值*/
  const listItems = numbers.map((number) =>
    
  );
  return (
    
      
      
       
      {listItems}
    
      
      
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('root')
);

正确使用键值的例子：

function ListItem(props) {
  return <li>{props.value}li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    
  );
  return (
    
      
      
       
      {listItems}
    
      
      
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('root')
);

键值需要与兄弟节点保证唯一

在使用的过程中，键值只要保证和兄弟节点的键值没有碰撞即可，并不需要全局唯一。在不同的列表中我们可以使用相同的key：

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        li>
      )}
    ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}h3>      <p>{post.content}p>    div>  );  return (    <div>      {sidebar}      <hr />      {content}    div>  ); } const posts = [  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},  {id: 2, title: 'Installation', content: 'You can install React from npm.'} ]; ReactDOM.render(  <Blog posts={posts} />,  document.getElementById('root') );

在上面的例子中sidebar、content是两个不同的队列，但是使用了相同的key值。

键值虽然显示的设置到元素或组件上，但是并不能在组件内部直接获取，如果需要使用键值，我们需要另外设置：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

这样，在Post组件中可以通过this.props.id获取到id值，而this.props.key获取不到任何值。

将map()方法嵌入到JSX中

在下面的例子中，我们直接在map()方法中生成ListItem：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    ul>
  );
}

JSX允许在大括号"{}"中嵌入任何表达式，因此我们可以直接嵌入map()方法使用：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    ul>
  );
}

表单

因为表单元素都保持着一些内部状态，所以HTML的表单与React的表单工作方式有一些区别。例如在标准的HTML表单只接收单个名称：

<form>
  <label>
    Name:
    <input type="text" name="name" />
  label>
  <input type="submit" value="Submit" />
form>

在用户提交表单时，浏览器默认会跳转到新的页面，当然在默认情况下React中的表单也是这样工作的。但是在大多数情况下，在用户提交数据到后台之前需要使用JavaScript来验证某些数据的合法性。实现这一点的方法我们称之为“controlled components（受控组件）”。

受控组件

在HTML中，, </code>, and <code style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; border-radius: 3px; padding: 2px; font-size: 13px;"><select></code> 这些表单元素都包含自己的状态，并在用户输入时发生改变。而在React中，可变的状态通常保存在state属性值中，并且只能通过setState来改变。</div> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">我们使用“受控组件”将2者合并，负责渲染表单的React组件还需要控制用户在渲染完毕后的各种输入操作。看下面这个例子：</div> <pre class="kotlin" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; font-size: 13px; overflow-x: auto; border-radius: 4px; padding: 10px; line-height: 1.4; word-wrap: normal; background: rgb(63, 63, 63); color: rgb(220, 220, 220);"><code class="language-javascript" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; border-radius: 4px; padding: 10px; overflow-x: auto; line-height: 1.4; word-wrap: normal; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span class="hljs-class" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box;">class NameForm extends React.Component { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">constructor(props) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">super(props); <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state = {value: <span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">''}; <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange = <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange.bind(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this); <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit = <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit.bind(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this); } handleChange(event) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.setState({value: event.target.value}); } handleSubmit(event) { alert(<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">'A name was submitted: ' + <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state.value); event.preventDefault(); } render() { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">return ( <form onSubmit={<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit}> <label> Name: <input type=<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">"text" value={<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state.value} onChange={<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange} /> </label> <input type=<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">"submit" value=<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">"Submit" /> </form> ); } }</code></pre> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);"></div> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">例子中通过在onChange中注册this.handleChange方法来记录值的改变，在改变时会通过setState()设置this.state值，并使用render渲染。此外，组件还用this.handleSubmit来拦截提交事件。这个例子中的组件称之为"受控组件"。</div> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">在受控组件中，每一个状态值的改变都会有一个相关处理函数来处理，这样可以直接修改或验证用户的输入。例如下面这个例子，我们将所有的输入强行变成大写：</div> <pre class="cs" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; font-size: 13px; overflow-x: auto; border-radius: 4px; padding: 10px; line-height: 1.4; word-wrap: normal; background: rgb(63, 63, 63); color: rgb(220, 220, 220);"><code class="language-javascript" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; border-radius: 4px; padding: 10px; overflow-x: auto; line-height: 1.4; word-wrap: normal; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">handleChange(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">event) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.setState({<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">value: <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">event.target.<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">value.toUpperCase()}); }</code></pre> <h2 id="h2-8" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin: 1.5em 0px; padding: 0px; font-size: 22px; font-weight: 500; color: rgb(61, 70, 77); background-color: rgb(255, 255, 255);">textarea标签</h2> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">在HTML中，<textarea>由其子元素来定义文本：</div> <pre class="kotlin" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; font-size: 13px; overflow-x: auto; border-radius: 4px; padding: 10px; line-height: 1.4; word-wrap: normal; background: rgb(63, 63, 63); color: rgb(220, 220, 220);"><code class="language-javascript" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; border-radius: 4px; padding: 10px; overflow-x: auto; line-height: 1.4; word-wrap: normal; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><textarea> Hello there, <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">is some text <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">in a text area <<span class="hljs-regexp" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box;">/textarea></code></pre> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">在React中，<textarea>使用一个value属性来代替子元素。这样使用<textarea>标签与使用单行输入元素（<input type="text">）类似：</div> <pre class="kotlin" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; font-size: 13px; overflow-x: auto; border-radius: 4px; padding: 10px; line-height: 1.4; word-wrap: normal; background: rgb(63, 63, 63); color: rgb(220, 220, 220);"><code class="language-javascript" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; border-radius: 4px; padding: 10px; overflow-x: auto; line-height: 1.4; word-wrap: normal; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span class="hljs-class" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box;">class EssayForm extends React.Component { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">constructor(props) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">super(props); <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state = { value: <span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">'Please write an essay about your favorite DOM element.' }; <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange = <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange.bind(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this); <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit = <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit.bind(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this); } handleChange(event) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.setState({value: event.target.value}); } handleSubmit(event) { alert(<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">'An essay was submitted: ' + <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state.value); event.preventDefault(); } render() { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">return ( <form onSubmit={<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit}> <label> Name: <textarea value={<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state.value} onChange={<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange} /> </label> <input type=<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">"submit" value=<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">"Submit" /> </form> ); } }</code></pre> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">在这里例子中，在构造函数就初始化了this.state.value。因此<textarea>会显示一个初始值。</div> <h2 id="h2-9" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin: 1.5em 0px; padding: 0px; font-size: 22px; font-weight: 500; color: rgb(61, 70, 77); background-color: rgb(255, 255, 255);">select标签</h2> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">在HTML中，select会创建一个下拉菜单，例如：</div> <pre class="xml" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; font-size: 13px; overflow-x: auto; border-radius: 4px; padding: 10px; line-height: 1.4; word-wrap: normal; background: rgb(63, 63, 63); color: rgb(220, 220, 220);"><code class="language-html xml" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; border-radius: 4px; padding: 10px; overflow-x: auto; line-height: 1.4; word-wrap: normal; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"><select> <span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"><option value="grapefruit">Grapefruit<span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"></option> <span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"><option value="lime">Lime<span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"></option> <span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"><option selected value="coconut">Coconut<span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"></option> <span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"><option value="mango">Mango<span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"></option> <span class="code-tag" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);"></select></code></pre> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">由于"cocount"设置了selected属性，所以默认状态下这个<option>是被选中的。在React中，<select>元素使用value元素来设定这个默认值，这在受控组件中使用更方便，因为只需要在一个地方更新它：</div> <pre class="javascript" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; font-size: 13px; overflow-x: auto; border-radius: 4px; padding: 10px; line-height: 1.4; word-wrap: normal; background: rgb(63, 63, 63); color: rgb(220, 220, 220);"><code class="language-javascript" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; box-sizing: border-box; border-radius: 4px; padding: 10px; overflow-x: auto; line-height: 1.4; word-wrap: normal; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span class="hljs-class" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box;">class FlavorForm extends React.Component { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">constructor(props) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">super(props); <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state = {value: <span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">'coconut'}; <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange = <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleChange.bind(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this); <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit = <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.handleSubmit.bind(<span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this); } handleChange(event) { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.setState({value: event.target.value}); } handleSubmit(event) { alert(<span class="code-string" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(204, 147, 147);">'Your favorite flavor is: ' + <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">this.state.value); event.preventDefault(); } render() { <span class="code-keyword" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; color: rgb(227, 206, 171);">return ( <span class="xml" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box;"><form onSubmit={this.handleSubmit}> <label> Pick your favorite La Croix flavor: <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> </label> <input type="submit" value="Submit" /> </form> ); } }</code></pre> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);"></div> <h2 id="h2-10" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin: 1.5em 0px; padding: 0px; font-size: 22px; font-weight: 500; color: rgb(61, 70, 77); background-color: rgb(255, 255, 255);">受控组件的替代方案</h2> <div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; box-sizing: border-box; margin-bottom: 16px; padding: 0px; word-break: break-all; word-wrap: break-word; color: rgb(61, 70, 77); font-size: 16px; background-color: rgb(255, 255, 255);">在某些情况下使用受控组件会非常的繁琐，因为它针对所有的变更都需要编写一个处理器来管理对应的状态。React官网推荐使用"非受控组件"技术来解决这个问题，详情请参阅：<a title="非受控组件" href="https://www.chkui.com/article/react/react_uncontroller_components" rel="nofollow" style="box-sizing: border-box; cursor: pointer; text-decoration-line: none; color: rgb(68, 102, 187); transition: color 0.3s;">uncontrolled components</a>，它是用于实现输入表单的替代技术。</div>

React 列表、键值与表单

列表与组件的键值

渲染多个组件

基于列表的组件

键值的使用

使用键值扩展组件

键值需要与兄弟节点保证唯一

将map()方法嵌入到JSX中

表单

受控组件

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

React 列表、键值与表单

列表与组件的键值

渲染多个组件

基于列表的组件

键值的使用

使用键值扩展组件

键值需要与兄弟节点保证唯一

将map()方法嵌入到JSX中

表单

受控组件

热门文章

最新文章

相关课程

相关电子书