04.React.Form表单(一)

github源码
表单是一个应用中极为重要的一部分。我们可以通过鼠标的点击和移动让用户和应用进行交互,但是通过表单,我们可以从用户那里获得大量的输入数据。
如此,通过表单,用户可以添加他的支付信息,输入搜索内容,编辑个人信息,上传图片或者收发信息等。表单使得一个网页变成了网页应用。
可以参考React官方文档关于Form的解说:React.Form
开发表单看起来很简单,例如只需要将form标签将一些input标签和submit标签包裹起来。但是构建一个丰富的,交互性强的,用户操作友好的表单则涉及了大量编程:

  • 表单输入会改变页面和服务器上的数据
  • 表单输入的变化必须和页面上任何地方的相关数据的变化同步
  • 用户可能会输入非预期的值,所以表单应该能够修改或者拒绝这样的输入
  • UI应当清楚的表达预期输入,以及有错误的验证机制
  • 表单输入域的值可能相互关联,产生复杂的逻辑
  • 表单的数据收集通常是异步的发向后台服务器,所以我需要让用户知道从中发生了什么

这看起来很复杂,但是React可以帮我们很好的处理这种复杂的表单。我们会构造一个sign-up-app来使用React进行表单处理。


基础按钮
效果图如下:

basic-button.jpeg

我们创建一个BasicButton组件,render()的内容如下:

  render() {
    return (
      <div>
        <h1>你觉得React怎么样?</h1>
        <button
          name="button-1"
          value="great"
          onClick={this.onGreatClick}>great</button>
        <button
          name="button-2"
          value="amazing"
          onClick={this.onAmazingClick}>amazing</button>
      </div>
    )
  }

目前看来这好像用原生HTML来处理表单。需要注意的是在button元素上的onClick prop。当一个button被点击了,如果这个button上设置了一个onClick的函数,那么这个函数将会被调用。我们可以给不同的按钮通过onClick设置不同的调用函数,以让按钮执行不同的操作。在这里,我们给great按钮设置了onGreatClick()函数,给amazing按钮设置了onAmazingClick()函数。
这些函数如下:

  onGreatClick = (e) => {
    console.log('click button-1 great', e)
  }

  onAmazingClick = (e) => {
    console.log('click button-2 amazing', 2)
  }

当点击不同的按钮,会触发不同的函数,以产生不同的结果,可以点击后在控制台上查看输出结果。


click-output.jpeg

事件和事件句柄(Event Handler)
可以看到我们的onClick函数(onAmazingClick()onGreatClick())接受一个形参e
在React中,处理的表单的核心和事件处理。当我们给一个元素赋以一个onClick prop函数,这个函数就会成为event handler。一旦事件发生,该函数就会被调用,而且该函数会接受一个event对象为参数。

在之前的例子中,当一个button元素被点击了,其对应的event handler函数将会被调用(onAmazingClick()onGreatClick()),并且提供了一个鼠标点击事件的对象e。这个对象是合成鼠标对象(SyntheticMouseEvent)。这个SyntheticMouseEvent将原生的MouseEvent封装起来,以满足跨浏览的需求。所以你可以向原生DOM事件那样使用SyntheticMouseEvent,而且不必考虑浏览器兼容问题。此外,如果想在React中使用原生事件,则可以使用 nativeEvent

事件对象包含了大量动作发生的有用信息。例如MouseEvent,当一个鼠标点击的时候,事件对象会包含x坐标,y坐标等。


回到Button
通过前面我们可以知道,我们可以通过设置不同的事件函数让用户执行不同的操作。但是,我们需要给每一个操作设置不同的事件函数。如果我们能用相同的event handler给不同的按钮来执行不同的操作,那样会清晰很多。
我们将之前的onAmazingClick()onGreatClick()替换成一个新的单一event handleronButtonClick()

  onButtonClick = (e) => {
    const button = e.target
    console.log(`The user clicked ${button.name}: ${button.value}`)
  }

我们的click handler函数接收了一个event对象: ee有一个属性target,这个属性是指用户点击的按钮。然后更新我们的render()函数,让按钮都绑定上onButtonClick

  render() {
    return (
      <div>
        <h1>你觉得React怎么样?</h1>
        <button
          name="button-1"
          value="great"
          onClick={this.onButtonClick}>great</button>
        <button
          name="button-2"
          value="amazing"
          onClick={this.onButtonClick}>amazing</button>
      </div>
    )
  }

点击后查看控制台的输出结果:


output.jpeg

这样,根据event对象和使用共享的event handler的优势,我们可以添加100个新按钮而不用修改应用中其他的代码部分。