React学习笔记之双向数据绑定

最新推荐文章于 2024-05-10 17:13:45 发布

虞啊鱼

最新推荐文章于 2024-05-10 17:13:45 发布

阅读量477

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_42592879/article/details/109905295

版权

这篇React学习笔记探讨了如何实现双向数据绑定。不同于Vue的v-model，React使用value属性和onChange方法来绑定基本数据类型，同时详细阐述了处理列表数据绑定的复杂操作，包括动态更新state中的列表项。

摘要由CSDN通过智能技术生成

React学习笔记之双向数据绑定

前言

有过vue使用经验的开发者对vue的数据绑定一定不会陌生，vue的数据可以简单地通过v-model进行绑定。

而在react中，没有提供v-model这样的简单的方法，而是需要在标签上绑定value值以及一个方法

一、绑定基本数据类型

绑定基本数据类型可以通过标签的value属性以及一个方法监听数据。

class Form extends Component {
   
    state = {
   
        //表单数据对象
        form: {
   
            username: 'zhangsan',
        },
    }
    toChange = (key, e) => {
   
        let value = e.target.value;
        this.setState({
   
            form: {
   
                ...this.state.form,
                [key]: value
            }
        })
    }
    render() {
   
        const {
    form }