React入门第四弹——数据绑定及表单处理

前言

上篇文章讲了react中有状态组件以及事件处理，今天给大家上个小项目——表单提交，里面会涉及到很多新的知识点，下面我们一起来学习~

表单元素

像<input>、<textarea>、<option>这样的表单元素不同于其他元素,因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易。

• 交互属性,用户对以下元素做出交互时通过onChange回调函数来监听组件变化。表单元素支持几个受用户交互影响的属性：
  • value用于<input>、<textarea>
  • checked用于<checkbox>、<radio>
  • selected用于<option>

受限组件和不受限组件

• 受限组件
  设置了value的<input>是一个受限组件,对于受限的<input>,渲染出来的HTML元素始终保持value属性的值,此时用户在渲染出来的组件里输入任何值都不起作用。

  return <input type='text' value='hello' />
  
  return <textarea name="description" value="demo" />
  

• 不受限组件
  没有设置value(或者设为null)的<input>组件是一个不受限组件。对于不受限的<input>组件,渲染出来的元素直接反应用户输入。

  return <input type='text' />
  

  上面是一个空值输入框,如果想设置一个非空的初始值,可以使用defaultValue属性。

  return <input type="text" defaultValue="Hello"