react（尚硅谷）03-react中的事件处理，非受控组件，受控组件，高阶函数，函数柯里化

最新推荐文章于 2024-07-21 14:48:43 发布

心湖中的石子

最新推荐文章于 2024-07-21 14:48:43 发布

阅读量299

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43745804/article/details/121060482

版权

React 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1、react中的事件处理

时间处理通过onXxxx属性指定事件处理函数
react使用的是自定义（合成）事件，而不是使用原生dom时间
react中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
通过event.target得到发生事件的dom元素对象
不要过度使用ref

2、非受控组件

包含表单的组件分类
a.受控组件
b.非受控组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="app">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //创建类组件
  class Login extends React.Component{
    handleSubmit=(event)=>{
      event.preventDefault()

      const {username,password}=this
      alert(`您输入的用户名是${username.value}，密码是:${password.value}`)

    }

    render(){
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={(currentNode)=>this.username=currentNode}name="username"/>
          <input type="text" ref={(currentNode)=>this.password=currentNode} name="password"/>
          <button>提交</button>
        </form>
      )
    }
  }
    //渲染类组件
    ReactDOM.render(<Login/>,document.getElementById('app'))

  </script>
</body>
</html>

3、受控组件

受控组件的数据，都维护在state里，随用随取，类似于vue里的双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="app">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //创建类组件
  class Login extends React.Component{
    state={
      username:'',
      password:''
    }
    handleSubmit=(event)=>{
      event.preventDefault()

      const {username,password}=this.state
      alert(`您输入的用户名是${username}，密码是:${password}`)

    }

    saveUsername=(event)=>{
      this.setState({username:event.target.value})

    }
    savePassword=(event)=>{
      this.setState({password:event.target.value})
    }

    render(){
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text"  onChange={this.saveUsername} name="username"/>
          <input type="text"  onChange={this.savePassword}  name="password"/>
          <button>提交</button>
        </form>
      )
    }
  }
    //渲染类组件
    ReactDOM.render(<Login/>,document.getElementById('app'))

  </script>
</body>
</html>

4、高阶函数

回调函数一定是一个函数名，而不是函数的执行调用（使用了小括号），因为执行人，在事件发生的时候去依据这个函数名去调用对应的函数

render(){
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text"  onChange={this.saveFormdata('username')} name="username"/>
          <input type="text"  onChange={this.saveFormdata('password')}  name="password"/>
          <button>提交</button>
        </form>
      )
    }

有的时候在写的时候使用过了小括号，要区别对待，表面上看是直接调用了函数，但要进入到函数里看看他是不是返回了一个函数。如下

saveFormdata=(dataType)=>{
      return (event)=>{
        //为了能解析处dataType，需要把形参dataType用方括号括看起来
        this.setState({[dataType]:event.target.value})
      }
    }

以上函数实际上就是一个高阶函数

- 高阶函数的定义
如果一个函数符合下面2个规范中的任何一个，那么就是高阶函数
a、如果A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
b、若果A函数，调用的返回值，依然是一个函数，那么A就可以称之为高阶函数

5、函数柯里化

通过函数继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
以下代码实际就是柯里化的写法

saveFormdata=(dataType)=>{
      return (event)=>{
        //为了能解析处dataType，需要把形参dataType用方括号括看起来
        this.setState({[dataType]:event.target.value})
      }
    }

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react（尚硅谷）03-react中的事件处理，非受控组件，受控组件，高阶函数，函数柯里化

1、react中的事件处理时间处理通过onXxxx属性指定事件处理函数react使用的是自定义（合成）事件，而不是使用原生dom时间react中的事件是通过事件委托方式处理的（委托给组件最外层的元素）通过event.target得到发生事件的dom元素对象不要过度使用ref2、非受控组件包含表单的组件分类a.受控组件b.非受控组件<!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫

专栏目录