04.React.Form表单（一）

2017-12-01 本文已影响0人阿九是只大胖喵

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 handler：onButtonClick()。

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

我们的click handler函数接收了一个event对象: e。e有一个属性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个新按钮而不用修改应用中其他的代码部分。

04.React.Form表单（一）

猜你喜欢

热点阅读