React简单表单最佳实践

从一个简单表单谈起

假设我们要做一个表单，比如是这样，要怎么做？

你可能会这样写：firstName对应一个键盘记录，lastName对应一个键盘记录：

import React from 'react'class Uncontrolled extends React.Component {constructor(props) {super(props)this.state = {firstName: '',lastName: '',}this.handleChangeFirstName = this.handleChangeFirstName.bind(this)this.handleChangeLastName = this.handleChangeLastName.bind(this)this.handleSubmit = this.handleSubmit.bind(this)}handleChangeFirstName({ target }) {this.setState({firstName: target.value,})}handleChangeLastName({ target }) {this.setState({lastName: target.value,})}handleSubmit(e) {e.preventDefault()console.log(`${this.state.firstName} ${this.state.lastName}`)}render() {return (<form onSubmit={this.handleSubmit}><input type="text" onChange={this.handleChangeFirstName} /><input type="text" onChange={this.handleChangeLastName} /><button>Submit</button></form>)}}export default Uncontrolled

但这样写的话，复用性就会很差，如果我不是2个表格，而是20个表格呢？难道要绑定20个差异不大看起来十分类似的函数吗？

事实上，可以有更好的方案。正如之前看到的，事件对象的目标属性表示触发事件的输入框。因此，我们可以将输入框的名称和值作为变量。handleChange改造成如下形式：

  handleChange({ target }) {this.setState({[target.name]: target.value,})}

接着在渲染时为每个组件设置具体名称：

<input type="text" name="firstName" onChange={this.handleChange} />
<input type="text" name="lastName" onChange={this.handleChange} />

完整代码如下：

import React from 'react'class Uncontrolled extends React.Component {constructor(props) {super(props)this.state = {firstName: '',lastName: '',}this.handleChange = this.handleChange.bind(this)this.handleSubmit = this.handleSubmit.bind(this)}handleChange({ target }) {this.setState({[target.name]: target.value,})}handleSubmit(e) {e.preventDefault()console.log(`${this.state.firstName} ${this.state.lastName}`)}render() {return (<form onSubmit={this.handleSubmit}><input type="text" name="firstName" onChange={this.handleChange} /><input type="text" name="lastName" onChange={this.handleChange} /><button>Submit</button></form>)}}export default Uncontrolled

为表单设置默认值

但我们之前打开表单的时候，这个表单是没有默认值的。如果想要一打开的时候就添加默认值。一种思路是写成这样：

<input type="text" defaultValue="Hello React" />

另外，我们还可以给state赋初值的方式来给默认值：

import React from 'react'class Controlled extends React.Component {constructor(props) {super(props)this.state = {firstName: 'Dan',lastName: 'Abramov',}this.handleChange = this.handleChange.bind(this)this.handleSubmit = this.handleSubmit.bind(this)}handleChange({ target }) {this.setState({[target.name]: target.value,})}handleSubmit(e) {e.preventDefault()console.log(`${this.state.firstName} ${this.state.lastName}`)}render() {return (<form onSubmit={this.handleSubmit}><inputtype="text"name="firstName"value={this.state.firstName}onChange={this.handleChange}/><inputtype="text"name="lastName"value={this.state.lastName}onChange={this.handleChange}/><button>Submit</button></form>)}}export default Controlled

如果要多次点击

继续进一步探讨我们希望尽量减少写重复代码的思路。假如这个表单的Submit按钮点击一次和点击两次想要触发不同的效果呢？我们肯定不想去对每一种效果写一种handle函数，那有什么简单一点的方法吗？

  handleEvent(event) {switch (event.type) {case 'click':console.log('clicked')breakcase 'dblclick':console.log('double clicked')breakdefault:console.log('unhandled', event.type)}}

<button onClick={this.handleEvent} onDoubleClick={this.handleEvent}>Click me!</button>

这样就可以实现我们的需求。

React简单表单最佳实践相关推荐

html+style+标签,20 + HTML表单最佳实践入门
良好的HTML表单要求至少在四点注意: 语义学无障碍功能设计表格可能会很困难,有时甚至是困扰了用户;经常中断的形式在页面上用户的主要重点和方向:他们购买的礼物,或尝试新的Web应用程序的意图, ...
maxcompute操作_MaxCompute表设计最佳实践
MaxCompute表设计最佳实践产生大量小文件的操作 MaxCompute表的小文件会影响存储和计算性能,因此我们先介绍下什么样的操作会产生大量小文件,从而在做表设计的时候考虑避开此类操作. 使 ...
[React]你有用过哪些React的表单库吗？说说它们的优缺点
[React]你有用过哪些React的表单库吗?说说它们的优缺点 redux-form react-jsonschema-form formik unform 个人简介我是歌谣,欢迎和大家一起交流前 ...
前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明该项目是进行表格布局表 ...
行政区划数据库表结构设计最佳实践
行政区划表设计最佳实践这里只涉及行政区划,不涉及国家表:此设计仅提供参考,具体内容请根据项目需求设计这里只涉及行政区划,不涉及国家表:此设计仅提供参考,具体内容请根据项目需求设计主键:id,bi ...
dwcc2015如何制作html,Dreamweaver CC2015简单表单的创建方法
Dreamweaver CC 2015 官方正式版软件大小:249M授权方式:免费软件立即下载 Dreamweaver CC2015怎么创建简单的表单?Dreamweaver集网页制作和管理网站于 ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
阿里巴巴数据库分库分表的最佳实践
点击▲关注 "数据和云" 给公众号标星置顶更多精彩第一时间直达 1.阿里巴巴分布式数据层发展和演变业务数据从原来的单库单表模式变成了数据被拆分到多个数据库,甚至多个表中, ...
React组件设计模式与最佳实践
React设计思想 UI=f(data)XUI = f(data)XUI=f(data)X 在React中,界面完全由数据驱动在React中,一切都是组件用户界面就是组件 export defau ...

React简单表单最佳实践

从一个简单表单谈起

为表单设置默认值

如果要多次点击

React简单表单最佳实践相关推荐

最新文章

热门文章