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" />
  

  上面的代码渲染出来的元素和受限组件一样有一个初始值,但这个值用户可以改变并会反应到界面上。
  类型为radio、checked的input支持defaultChecked属性,<select>支持defaultValue属性。

  <input type='radio' name='sex' defaultChecked />1
  <input type='radio' name='sex' />2
  <select defaultValue="C">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  

  HTML中<select>通常使用<option>的selected属性设置选中状态;React为了更方便的控制组件,使用value替代了,如果是不受限组件则使用defaultValue。
  如果给value属性传递一个数组,可以选中多个选项：<select multiple={true} value={['B', 'C']}></select>

常用表单数据绑定

通过以上的学习我们已经能够掌握常用的表单数据的绑定了,接下来要处理的是关于表单中双向数据绑定的事件方法封装。
通过现有的知识点,我们知道如果要对表单数据进行双向数据绑定的话需要设置对应的事件函数：

handleClick = (e) => {
    
    
  this.setState({
    
    name: e.target.value})
}

但是我们的表单中不可能只有一个数据需要进行双向数据绑定,所以最好的办法肯定是我们对这个函数进行复用,这里我们封装这个函数的时候就需要考虑到我们是通过动态的name值去进行设置的,因此我们需要把函数这样封装：

handleChange = (e) => {
    
    
  // 这里要注意我们一定要用[]进行包裹,因为这里我们拿到的name是一个字符串
  let name = e.target.name
  // this.setState({ [name]: e.target.value })
  this.setState({
    
     [e.target.name]: e.target.value })
}

注册功能实现

注册功能中,双向数据绑定和验证都是我们需要考虑到的,因此在实现注册功能的时候,我们还需要在原有的双向数据绑定功能上集成我们的正则匹配验证功能以及错误提示信息。类似下面这样的：

// 姓名校验处理
nameChange = (e) => {
    
    
  let rule = /^[a-zA-Z0-9_-]{4,10}$/
  let value = e.target.value
  let error = ''
  if(!value) {
    
    
    error = '请输入昵称'
  } else if (!rule.test(value)) {
    
    
    error = '请输入4-10位昵称'
  } else {
    
    
    error = ''
  }
  this.setState({
    
    
    name: value,
    nameError: error
  })
}

<label>昵称：
  <input type="text" name="name" 
  value={
    
    name} onChange={
    
    this.nameChange}/>
  <span className="danger">{
    
    nameError}</span>
</label>

这样我们能够实现对于昵称的验证,但是表单中的验证还有很多,诸如密码、手机号等等,这些我们又该如何去做到呢,? 下篇文章会带大家来解决这个问题