文章目录
表单处理
1、受控组件
将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。
绑定步骤：
- 在state中添加一个状态，作为表单元素的value值
- 给表单元素绑定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>
<input
type="text"
value={this.state.username}
onChange={this.setUsername}
/>
</div>
<div>
<input
type="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用 [变量],才能当作对象中的动态属性的key
this.setState({ [key]: e.target.value.trim() })
}
login = () => console.log(this.state)
render() {
return (
<div>
{/* 受控组件,value受到state控制,state中的数据通过onchange来修改 */}
<div>
<input
type="text"
value={this.state.username}
onChange={this.setValue('username')}
/>
</div>
<div>
<input
type="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>
<input
type="text"
{...this.state.username}
/>
</div>
<div>
<input
type="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，与之返回false
let 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>
<input
type="checkbox"
defaultValue={item}
// checked 只接受true/false 而使用es6数据新增方法includes它返回就是true/false
checked={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.state
return (
<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.state
return (
<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个规范中的任何一个，那该函数就是高阶函数。
- 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
- 若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.state
alert(`你输入的用户名是：${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 - 事件处理 - 非受控组件 - 受控组件 - 高阶函数 - 函数柯里化
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
