脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react双向绑定

react中的双向绑定你真的了解吗

 更新时间：2022年03月07日 16:38:08   作者：前端三脚猫  
这篇文章主要为大家详细介绍了react中的双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

前言：因为项目原因需要学习另一个超级火的框架react, 因为之前一直使用vue进行开发，所以在学习react中会不自觉的代入一些vue中的概念来理解react中的实现，下面就通过对比学习的方式记录下react中的知识。

在react中其实是没有双向绑定的概念，每次更新页面和值都需要我们自己去调用指定的api来触发，而在vue中只需要使用v-model指令就可以完全实现，在vue中的指令其实也是使用了几个事件的语法糖来实现，所以下面就去看下react中的“双向绑定”是怎么来实现的。

如果实现react中得双向绑定，首先要理解state这个属性，简单来说react中得state就是一个对象，它用来缓存和维护当前组件中所使用到得状态，可以理解为vue中data中定义得值，如：

import React, { Component } from 'react'
export default class Class extends Component {
  constructor(props) {
    super(props)
    this.state = {name: '', age: ''}
  }
  render() {
    return (
      <div>
        <form onSubmit={handleSubmit}>
        </form>
      </div>
    )
  }
}

而在函数式组件中，使用hooks可以将这个统一的state值根据功能和场景拆分为多个state用来更加方便的使用和维护，如：

import React, { useState } from 'react'
export default function ModelChange() {
  const [name, setName] = useState('')
  const [age, setAge] = useState()
  const handleSubmit = () => {
  }
  return (
    <div>
      <form onSubmit={handleSubmit}>
      </form>
    </div>
  )
}

需要注意的是，如果需要改变维护的状态的值，需要使用指定的方法才会使页面更新，如函数式组件中定义的setName方法等。下面就看看react在input输入框中实现双向绑定，代码如下：

import React, { useState } from 'react'
export default function ModelChange() {
  const [name, setName] = useState('')
  const handleCnhange = e => {
    const data = e.target.value
    setName(data)
  }
  return (
    <div>
      <form>
        <label>
          名字：
          <input type="text" value={name} onChange={handleCnhange} />
        </label>
      </form>
    </div>
  )
}

上面的代码通过useState定义了值name，然后通过input标签的value将name展示出来，通过监听change事件获取输入的值并调用定义好的方法setName修改name的值并更新页面，又使页面展示为新输入的值，通过这个流程的操作就实现了在react中的双向绑定。如果我们想要修改和获取多个输入的值可以使用name属性来实现，代码如下：

import React, { useState } from 'react'
export default function ModelChange() {
  const [data, setData] = useState({
    name: '', age: ''
  })
  const handleCnhange = e => {
    const {value, name} = e.target
    setData(preData => {
      return {
        ...preData,
        [name]: value
      }
    })
  }
  const handleSubmit = (e) => {
    console.log(data)
  }
  return (
    <div>
      <form>
        <label>
          名字：
          <input type="text" name="name" value={data.name} onChange={handleCnhange} />
        </label>
        <label>
          年龄：
          <input type="text" name="age" value={data.age} onChange={handleCnhange} />
        </label>
        <input type="button" value="提交" onClick={handleSubmit} />
      </form>
    </div>
  )
}

上面代码将name和age字段声明在了一个集合中（根据业务和使用场景也可以进行拆分定义），通过给input标签添加name属性来更给指定属性更新当前输入的值，效果如下：

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容! 

您可能感兴趣的文章:

相关文章

  • react创建项目启动报错的完美解决方法

    react创建项目启动报错的完美解决方法

    这篇文章主要介绍了react创建项目启动报错的完美解决方法,全称为Node Package Manager，是随同NodeJS一起安装的包管理工具，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-08-08
  • 浅谈React的React.FC与React.Component的使用

    浅谈React的React.FC与React.Component的使用

    本文主要介绍了React的React.FC与React.Component的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Header组件热门搜索栏的实现示例

    Header组件热门搜索栏的实现示例

    这篇文章主要为大家介绍了Header组件热门搜索栏的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • React组件通信实现流程详解

    React组件通信实现流程详解

    这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下
    2022-12-12
  • 深入理解React State 原理

    深入理解React State 原理

    本文主要介绍了React State 原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • React中使用Redux Toolkit状态管理的示例详解

    React中使用Redux Toolkit状态管理的示例详解

    在现代 React 应用程序中,状态管理是一个至关重要的部分,使用 Redux Toolkit 可以简化 Redux 的配置和管理,本文将通过三个文件的示例,详细讲解如何使用 Redux Toolkit 创建和管理一个简单的计数器状态,需要的朋友可以参考下
    2024-11-11
  • React+Typescript创建项目的实现步骤

    React+Typescript创建项目的实现步骤

    通过React组件库和TypeScript的强类型特性,开发者可以创建出具有优秀用户体验和稳定性的Web应用程序,本文主要介绍了React+Typescript创建项目的实现步骤,感兴趣的可以了解一下
    2023-08-08
  • React创建组件的的方式汇总

    React创建组件的的方式汇总

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React组件的两种创建方式,一种是使用函数创建组件另一种是使用类创建组件，需要的朋友可以参考下
    2021-11-11
  • react常见的ts类型实践解析

    react常见的ts类型实践解析

    这篇文章主要为大家介绍了react常见的ts类型实践解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • React中实现组件通信的几种方式小结

    React中实现组件通信的几种方式小结

    在构建复杂的React应用时,组件之间的通信是至关重要的,从简单的父子组件通信到跨组件状态同步,不同组件之间的通信方式多种多样,下面我们认识react组件通信的几种方式,需要的朋友可以参考下
    2024-04-04

最新评论