15、React 中表单的使用指南

React 中表单的使用指南

1. React 中表单的推荐使用方式

在 React 中设置事件处理程序时，有两个重要的注意事项：
- 不要调用方法（即不要加括号）。
- 不要在花括号周围使用双引号（正确的写法是 EVENT={this.METHOD} ）。

另外，还可以通过手动监听 key-up 事件（ onKeyUp ）并检查键码（回车键的键码是 13）来实现表单在按下回车键时提交，示例代码如下：

handleKeyUp(event) {
    if (event.keyCode == 13) return this.sendData()
}
render() {
    return <form onKeyUp={this.handleKeyUp}>
        ...
    </form>
}

需要注意的是， sendData() 方法需要在类或组件的其他地方实现，并且为了使 this.sendData() 正常工作，需要在构造函数中使用 bind(this) 将上下文绑定到事件处理程序。

总结来说，不仅可以在表单的单个元素上设置事件，也可以在表单元素本身设置事件。接下来，我们将了解如何定义表单元素。

2. 定义表单元素

在 HTML 中，几乎所有的输入字段都可以用四个元素来