表单处理

1、受控组件

将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。

绑定步骤：

1. 在state中添加一个状态，作为表单元素的value值
2. 给表单元素绑定change事件，将表单元素的值设置为state的值

<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />

// 注：多表单元素需优化事件方法
this.setState({[e.target.name]: e.target.value
})

受控组件实现登录输入框

import React, { Component } from 'react';class Child extends Component {state = {username: '',password: ''}setUsername = e => this.setState({ username: e.target.value.trim() })setPassword = e => this.setState({ password: e.target.value.trim() })login = () => console.log(this.state)render() {return (<div>{/* 受控组件,value受到state控制,state中的数据通过onchange来修改 */}<div><inputtype="text"value={this.state.username}onChange={this.setUsername}/></div><div><inputtype="text"value={this.state.password}onChange={this.setPassword}/></div><div><button onClick={this.login}>登录用户</button></div></div>);}
}export default Child;

受控组件操作封装

import React, { Component } from 'react';class Child extends Component {state = {username: '',password: ''}setValue = key => e => {// 给对象中的key使用变量,在js用 [变量],才能当作对象中的动态属性的keythis.setState({ [key]: e.target.value.trim() })}login = () => console.log(this.state)render() {return (<div>{/* 受控组件,value受到state控制,state中的数据通过onchange来修改 */}<div><inputtype="text"value={this.state.username}onChange={this.setValue('username')}/></div><div><inputtype="text"value={this.state.password}onChange={this.setValue('password')}/></div><div><button onClick={this.login}>登录用户</button></div></div>);}
}export default Child;

受控组件聚合封装

import React, { Component } from 'react';class Child extends Component {state = {username: {value: '',onChange: e => this.setState(state => ({ username: { ...state.username, value: e.target.value } }))},password: {value: '',onChange: e => this.setState(state => ({ password: { ...state.password, value: e.target.value } }))},}login = () => console.log(this.state)render() {/* let obj1 = { a: { id: 1, name: 'aa' }, b: { id: 2, name: 'bb' } }console.log({ a: { ...obj1.a, id: 100 }, b: { ...obj1.b } }); */return (<div>{/* 受控组件,value受到state控制,state中的数据通过onchange来修改 */}<div><inputtype="text"{...this.state.username}/></div><div><inputtype="text"{...this.state.password}/></div><div><button onClick={this.login}>登录用户</button></div></div>);}
}export default Child;

受控组件之单个复选框. 单选

import React, { Component } from 'react';class Child extends Component {state = {show: true}setShow = evt => {this.setState({ show: evt.target.checked })}render() {return (<div>{/* 受控组件绑定 */}<input type="checkbox" checked={this.state.show} onChange={this.setShow} /><hr />{this.state.show?<h3>内容显示</h3>: null}</div>);}
}export default Child;

受控组件-多个复选框 全选

import React, { Component } from 'react';class Child extends Component {state = {all: false,lessons: ['html', 'css', 'js', 'vue', 'react'],// 选中的课程selected: []}// 全选操作方法setAll = evt => {// 得到当前单个复选框它的是否勾选，如果勾选上则返回true，与之返回falselet all = evt.target.checked// 如果你返回为真，则需要把记录勾选每一项中听数组件中添加对应的所有的记录数据，反之数组为空// 赋值一定要注意，数组它是引用类型，所以用深复制完成let selected = all ? [...this.state.lessons] : []// 更新数据源和更新视图this.setState({ all, selected })}// 单个选择// item 它就是它前的选中项的数据// evt  事件对象setSelected = (item, evt) => {// 得到当前复选框是否选中let bool = evt.target.checked// 单个复选框，勾选后的数据记录数组let selected = []// 如果你勾选中if (bool) {// 把当前的数据项添加到数据源中selected = [...this.state.selected, item]} else {// 如果没有勾选，则把当前项去除selected = this.state.selected.filter(val => val !== item)}// 更新数据源和视图this.setState(state => ({selected}), () => {// 等数据更新完毕后，获取最新的勾选数据，判断它是否与源数据一样长度，如果一样则表示全选中，则让全选复选框选中this.setState({ all: this.state.lessons.length === this.state.selected.length })})}render() {return (<div>{/* 全选的复选框，它是单个复选框，所以它的受控值为 布尔值 */}<input type="checkbox" checked={this.state.all} onChange={this.setAll} /><hr /><ul>{this.state.lessons.map(item => (<li key={item}>{/* 全部选中 */}<span><inputtype="checkbox"defaultValue={item}// checked 只接受true/false  而使用es6数据新增方法includes它返回就是true/falsechecked={this.state.selected.includes(item)}onChange={evt => this.setSelected(item, evt)}/></span> --<span>{item}</span></li>))}</ul></div>);}
}export default Child;

受控组件单选框 radio

import React, { Component } from 'react';class Child extends Component {state = {sex: '先生'}render() {let { sex } = this.statereturn (<div><label><input type="radio" name="sex" checked={sex === '先生'} onChange={()=>this.setState({sex:'先生'})} />先生</label><label><input type="radio" name="sex" checked={sex === '女士'} onChange={()=>this.setState({sex:'女士'})} />女士</label></div>);}
}export default Child;

下拉受控组件的实现控制 下拉选项

import React, { Component } from 'react';class Child extends Component {state = {city: '北京'}render() {let { city } = this.statereturn (<div>{/* 下拉框中，可以在option中添加对应selected属性，但是jsx中他会警告，告诉它没有此选项，所以就需要来修改一下，通过搜索查找，找到答案：写在select元素属性中，如果value值和option中的value或defaultValue一致时，则选中 */}<select value={city} onChange={evt => this.setState({ city: evt.target.value })}><option defaultValue="未知">请选择</option><option defaultValue="安徽">安徽</option><option defaultValue="北京">北京</option></select></div>);}
}export default Child;

2、 非受控组件

import React, { Component, createRef } from 'react';class Child extends Component {// 1.对于createRef得到当前的ref对象  成员属性usernameRef = createRef()onSearch = () => {// 3.通过ref对象获取当前表单项中的dom对象，通过dom获取表单项中的数据console.log(this.usernameRef.current.value.trim());this.usernameRef.current.value = ''}render() {return (<div>{/* 2.把ref对象绑定到表单项中的属性ref值中 */}<input type="text" ref={this.usernameRef} /><button onClick={this.onSearch}>搜索一下</button></div>);}
}export default Child;

3. 高阶函数与函数的柯里化

1、 高阶函数

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

常见的高阶函数有：Promise、setTimeout、arr.map()等等

2、 函数的柯里化

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

function sum1(a, b, c){return a + b + c;
}
sum1(1, 2, 3)// 柯里化后
function sum(a){return(b)=>{return (c)=>{return a+b+c}}
}
sum(1)(2)(3)

3、 利用高阶函数与函数柯里化简写代码

//创建组件
class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中 （高阶函数+函数柯里化）saveFormData = (dataType)=>{return (event)=>{this.setState({[dataType]:event.target.value})}}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>密码：<input onChange={this.saveFormData('password')} type="password" name="password"/><button>登录</button></form>)}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))

【补充】对象相关的知识

let a = 'name'let obj = {} // {name:'tom'}
obj[a] = 'tom'   //obj['name'] = 'tom'
console.log(obj);

4 、不用柯里化实现

//保存表单数据到状态中
saveFormData = (dataType,event)=>{this.setState({[dataType]:event.target.value})
}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={ event => this.saveFormData('username',event) } type="text" name="username"/>密码：<input onChange={ event => this.saveFormData('password',event) } type="password" name="password"/><button>登录</button></form>)
}

---

参考：
【React】面向组件编程 - 基本理解和使用 - 组件三大核心属性state-props-refs - 事件处理 - 非受控组件 - 受控组件 - 高阶函数 - 函数柯里化