[react基础] 表单 受控组件 非受控组件 单选 多选 全选 下拉菜单 高阶函数与函数的柯里化

文章目录

• ​​表单处理​​

• ​​1、受控组件​​

• ​​受控组件实现登录输入框​​
• ​​受控组件操作封装​​
• ​​受控组件聚合封装​​
• ​​受控组件之单个复选框. 单选​​
• ​​受控组件-多个复选框 全选​​
• ​​受控组件单选框 radio​​
• ​​下拉受控组件的实现控制 下拉选项​​

• ​​2、 非受控组件​​
• ​​3. 高阶函数与函数的柯里化​​

• ​​1、 高阶函数​​
• ​​2、 函数的柯里化​​
• ​​3、 利用高阶函数与函数柯里化简写代码​​
• ​​【补充】对象相关的知识​​
• ​​4 、不用柯里化实现​​

表单处理

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>
          <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个规范中的任何一个，那该函数就是高阶函数。

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.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 - 事件处理 - 非受控组件 - 受控组件 - 高阶函数 - 函数柯里化​​