React入门级学习---3

最新推荐文章于 2024-08-21 08:32:21 发布

我的发量超多

最新推荐文章于 2024-08-21 08:32:21 发布

阅读量333

点赞数 1

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

本文链接：https://blog.csdn.net/pangqixjj/article/details/121805465

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了React中受控组件和非受控组件的概念，并通过示例代码展示了它们的使用。受控组件的值由React状态控制，而非受控组件则直接操作DOM。文章还演示了如何通过优化代码，用一个通用的事件处理函数处理受控组件的变化。此外，还展示了一个简单的购物车应用，实现了商品数量的增减功能。

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

组件根据表单处理来分类，也可以分为两类：
受控组件
非受控组件

首先我们先来安装一个谷歌插件：
在这里插入图片描述

找到项目中的 node-modules 里面的 pmmmwh 里面的client 的 ReactRefreshEntry.js 文件的第八行注释掉

在这里插入图片描述
这样就可以用了

受控组件

其值受到react控制的表单元素
react将state与表单元素的value绑定到一起

index.js代码如下

import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        txt: 'hello',
        content: '',
        city: 'sh',
        isChecked:true
    }

    // 事件处理程序 处理文本框变化
    handleChange = (e)=>{
        this.setState({
            txt: e.target.value
        })
    }
    // 处理富文本域变化
    handleContent = (e)=>{
        this.setState({
            content: e.target.value
        })
    }
    // 处理下拉框变化
    handleCity = (e)=>{
        this.setState({
            city: e.target.value
        })
    }
    // 处理复选框变化
    handleChecked = (e)=>{
        this.setState({
            isChecked: e.target.checked
        })
    }
    render() {
        return (
        <div>
            <input type="text" name="txt" value={this.state.txt} onChange={this.handleChange}/>
            <textarea name="content" value={this.state.content} onChange={this.handleContent}/>
            <select name="city" value={this.state.city} onChange={this.handleCity}>
                <option value="bj">beijing</option>
                <option value="sh">shanghai</option>
            </select>
            <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}/>
        </div>
                
        )
    }
}

// 渲染
ReactDOM.render(<App />,document.getElementById('root'));

优化此代码，我们可以用一个方法：
可以用name来区别

index.js代码如下：

import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        txt: 'hello',
        content: '',
        city: 'sh',
        isChecked: true
    }
    handleForm = e => {
        const target = e.target;
        const { name, type } = e.target;
        const v = type === 'checkbox' ? target.checked : target.value;
        this.setState({
            [name]: v
        })
    }
    render() {
        return (
            <div>
                <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
                <textarea name="content" value={this.state.content} onChange={this.handleForm} />
                <select name="city" value={this.state.city} onChange={this.handleForm}>
                    <option value="bj">beijing</option>
                    <option value="sh">shanghai</option>
                </select>
            </div>

        )
    }
}

// 渲染
ReactDOM.render(<App />, document.getElementById('root'));

在这里插入图片描述

非受控组件：

就是通过操作DOM的方式来操作表单
类似于vue里面的ref一样的

index.js代码如下

import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    constructor() {
        super();
        // 创建ref对象
        this.txtRef = React.createRef();
    }
    getTxt = () => {
        console.log('文本框的值', this.txtRef.current.value);
    }
    render() {
        return (
            <div>
                <input type="text" ref={this.txtRef} />
                <button onClick={this.getTxt}>获取文本框的值</button>
            </div>

        )
    }
}

// 渲染
ReactDOM.render(<App />, document.getElementById('root'));

在这里插入图片描述

根据前两天的学习已经可以写一个购物车了：

只写了功能，没有写样式，超级无敌丑！

index.js代码如下

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

import Money from "./Money";
ReactDOM.render(<Money />, document.getElementById('root'));

Money.js代码如下

// 导入相关的包
import React from 'react'

// 创建Money组件
class Money extends React.Component {
    state = {
        // 定义数组
        goods: [
            {
                id: 1,
                name: '笔记本',
                price: 5999,
                count: 1,
                total: 5600
            },
            {
                id: 2,
                name: '手机',
                price: 4200,
                count: 1,
                total: 4200
            },
            {
                id: 3,
                name: '电视机',
                price: 6888,
                count: 1,
                total: 6888
            }
        ]
    }
    // 点击-按钮事件处理程序
    // 在做加减之前我们需要考虑一下，浏览器怎么知道我点的是哪个按钮呢？data-id = {item.id}
    add = (e) => {
        // console.log(e.target.dataset.id);
        // 接下来我们来进行计算
        // 拿到当前按钮身上绑定的id 通过id找到对应对象 通过setState更新数据
        this.state.goods.map(item => {
            if (item.id == e.target.dataset.id) {
                item.count++;
                item.total = item.count * item.price;
            }
        });
        // 数据已经发生改变了，此时我们调用this.setState让render进行重新执行
        this.setState({});
    }
    // 点击-按钮事件处理程序
    sub = (e) => {
        // 接下来我们来进行计算
        // 拿到当前按钮身上绑定的id 通过id找到对应对象 通过setState更新数据
        this.state.goods.map(item => {
            if (item.count >= 1) {
                if (item.id == e.target.dataset.id) {
                    item.count--;
                    item.total = item.count * item.price;
                }
            }
        });
        // 数据已经发生改变了，此时我们调用this.setState让render进行重新执行
        this.setState({});
    }

    render() {
        return (
            <ul>
                {
                    this.state.goods.map(item => {
                        return <li key={item.id}>
                            {/* 显示商品名称 */}
                            <span>{item.name}：</span>
                            {/* 显示商品单价 */}
                            <span>￥{item.price}</span>
                            <div id='btn'>
                                {/* 增加商品个数 */}
                                <button onClick={this.add} data-id={item.id}>+</button>
                                {/* 显示当前商品个数 */}
                                <button>{item.count}</button>
                                {/* 减少商品个数 */}
                                <button onClick={this.sub} data-id={item.id}>-</button>
                                {/* 增加商品总价 */}
                            </div>
                            <span>总价：{item.total}</span>
                        </li>
                    })
                }
            </ul>
        )
    }
}

// 导出Money组件
export default Money