09State详解

最新推荐文章于 2022-05-02 09:47:13 发布
最新推荐文章于 2022-05-02 09:47:13 发布
阅读量95 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012872771/article/details/103590103
版权

需要完善的功能：
功能1：删除单个Option
功能2：刷新后数据依旧存在

**功能1思路：**在option中添加一个button，然后绑定事件，点击的时候可以改变MyApp里的state的数组。所以我们应该把事件函数定义在MyApp中，通过传值给option。
传值过程： MyApp -> Options -> Option

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleRemoveAll = this.handleRemoveAll.bind(this);
        this.handlePickOption = this.handlePickOption.bind(this);
        this.handleAddOption = this.handleAddOption.bind(this);
        this.state = {
            options: props.options
        }
    }
    handleAddOption(option) {
        // 验证
        if(!option) {
            return "选项不能为空"
        }else if(this.state.options.includes(option)) {
            return "不能输出重复的选项"
        }else {
            this.setState( prevState => ({ options: prevState.options.concat([option])}))
        }
    }
    handleRemoveOption() {
        console.log("回城...")
    }
    handleRemoveAll() {
        this.setState(() => ({options: []}))
    }
    handlePickOption() {
        const index = Math.floor(Math.random() * this.state.options.length);
        const option = this.state.options[index];
        alert(option)
    }
    render() {
        const title = "帮你决定ba";
        const subTitle = "把你的命交给电脑吧";
        return (
            <div>
                <Header subTitle={subTitle}/>
                <Action 
                    handleAddOption={this.handlePickOption}
                    hasOptions={this.state.options.length > 0} 
                    handlePickOption={this.handlePickOption}/>
                <Options 
                    options={this.state.options} 
                    handleRemoveAll={this.handleRemoveAll}
                    handleRemoveOption={this.handleRemoveOption}/>
                <AddOption handleAddOption={this.handleAddOption}/>
            </div>
        )
    }
}

MyApp.defaultProps = {
    options: ["鲁班7号", "小乔", "蔡文姬", "王昭君", "妲己", "安琪拉"]
}

// 小组件
const Header = (props) => {
    return (
        <div>
            <h1>{props.title}</h1>
            <p>{props.subTitle}</p>
        </div>
    )
}
Header.defaultProps = {
    title: "我就是默认值"
}

const Action = (props) => {
    return (
        <div>
            <button 
                onClick={props.handlePickOption}
                disabled={!props.hasOptions}
                >
                随机输出
            </button>
        </div>
    )
} 

const Options = (props) => {
    return (
        <div>
            <button onClick={props.handleRemoveAll}>重新开始</button>
            {props.options.map( (option, index) => (<Option key={index} option={option} handleRemoveOption={props.handleRemoveOption}/>))}
        </div>
    )
}

const Option = props => {
    return (
        <div>
            {props.option}
            <button onClick={props.handleRemoveOption}>击杀</button>
        </div>
    )
}

class AddOption extends React.Component {
    constructor(props) {
        super(props);
        this.formSubmit = this.formSubmit.bind(this);
        this.state = {
            error: undefined,
        }
    }
    formSubmit(e) {
        e.preventDefault();
        let option = e.target.elements.option.value.trim();
        const error = this.props.handleAddOption(option)
        console.log(error)
        this.setState( () => ({ error,}))
        e.target.elements.option.value = "";
    }
    render() {
        return (
            <div>
                {this.state.error && <p>{this.state.error}</p>}
                <form  onSubmit={this.formSubmit}>
                    <input type="text" name="option" placeholder="请输入要新增的英雄"/>
                    <button>新增英雄</button>
                </form>
            </div>
        )
    }
}

const User = (props) => {
    return (
        <div>
            <p>名字：{props.name}</p>
            <p>年龄：{props.age}</p>
        </div>
    )
}
ReactDOM.render(<MyApp/>, document.getElementById("app"));

在这里插入图片描述
按钮可以使用，继续完善功能：在点击的时候把对应的文本传回给事件函数，
点击的时候会执行函数，所以套一层函数，点击的时候把传参的那个函数写里面。

const Option = props => {
    return (
        <div>
            {props.option}
            <button onClick={() => {
                props.handleRemoveOption(props.option)
            }}>击杀</button>
        </div>
    )
}

在这里插入图片描述
然后在事件函数中开始使用setState来修改数组。

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleRemoveAll = this.handleRemoveAll.bind(this);
        this.handlePickOption = this.handlePickOption.bind(this);
        this.handleAddOption = this.handleAddOption.bind(this);
        this.handleRemoveOption = this.handleRemoveOption.bind(this);
        this.state = {
            options: props.options
        }
    }
    handleAddOption(option) {
        // 验证
        if(!option) {
            return "选项不能为空"
        }else if(this.state.options.includes(option)) {
            return "不能输出重复的选项"
        }else {
            this.setState( prevState => ({ options: prevState.options.concat([option])}))
        }
    }
    handleRemoveOption(option) {
        this.setState( prevState => ({
            // 让他直接return对象，而不是代码块
            options: prevState.options.filter((item) => {
                return item !== option
            })
            // console.log(option)
            // 拿到上一个数组
            // 注意不能改变原数组的内存
            // 筛选
        }))
    }
    handleRemoveAll() {
        this.setState(() => ({options: []}))
    }
    handlePickOption() {
        const index = Math.floor(Math.random() * this.state.options.length);
        const option = this.state.options[index];
        alert(option)
    }
    render() {
        const title = "帮你决定ba";
        const subTitle = "把你的命交给电脑吧";
        return (
            <div>
                <Header subTitle={subTitle}/>
                <Action 
                    handleAddOption={this.handlePickOption}
                    hasOptions={this.state.options.length > 0} 
                    handlePickOption={this.handlePickOption}/>
                <Options 
                    options={this.state.options} 
                    handleRemoveAll={this.handleRemoveAll}
                    handleRemoveOption={this.handleRemoveOption}/>
                <AddOption handleAddOption={this.handleAddOption}/>
            </div>
        )
    }
}

MyApp.defaultProps = {
    options: ["鲁班7号", "小乔", "蔡文姬", "王昭君", "妲己", "安琪拉"]
}

// 小组件
const Header = (props) => {
    return (
        <div>
            <h1>{props.title}</h1>
            <p>{props.subTitle}</p>
        </div>
    )
}
Header.defaultProps = {
    title: "我就是默认值"
}

const Action = (props) => {
    return (
        <div>
            <button 
                onClick={props.handlePickOption}
                disabled={!props.hasOptions}
                >
                随机输出
            </button>
        </div>
    )
} 

const Options = (props) => {
    return (
        <div>
            <button onClick={props.handleRemoveAll}>重新开始</button>
            {props.options.map( (option, index) => (<Option key={index} option={option} handleRemoveOption={props.handleRemoveOption}/>))}
        </div>
    )
}

const Option = props => {
    return (
        <div>
            {props.option}
            <button onClick={() => {
                props.handleRemoveOption(props.option)
            }}>击杀</button>
        </div>
    )
}

class AddOption extends React.Component {
    constructor(props) {
        super(props);
        this.formSubmit = this.formSubmit.bind(this);
        this.state = {
            error: undefined,
        }
    }
    formSubmit(e) {
        e.preventDefault();
        let option = e.target.elements.option.value.trim();
        const error = this.props.handleAddOption(option)
        console.log(error)
        this.setState( () => ({ error,}))
        e.target.elements.option.value = "";
    }
    render() {
        return (
            <div>
                {this.state.error && <p>{this.state.error}</p>}
                <form  onSubmit={this.formSubmit}>
                    <input type="text" name="option" placeholder="请输入要新增的英雄"/>
                    <button>新增英雄</button>
                </form>
            </div>
        )
    }
}

const User = (props) => {
    return (
        <div>
            <p>名字：{props.name}</p>
            <p>年龄：{props.age}</p>
        </div>
    )
}
ReactDOM.render(<MyApp/>, document.getElementById("app"));

功能1完成：
在这里插入图片描述

功能2思路：
原本是当刷新的时候向后台请求一下数据，新增或离开的时候向后台提交数据。但是我们是前端，没法用后端，所以使用localStorage来存储。
了解一下React的生命周期：

  1. React的生命周期只能定义在类组件中，不能定义在函数组件中；
  2. componentDidMount钩子函数，当页面刷新的时候执行；
  3. componentDidUpdate钩子函数，当页面渲染的时候执行；
  4. componentWillUnmount稿子函数，当页面卸载的时候执行。
    componentDidMount() {
        console.log("刷新页面")
    }
    componentDidUpdate() {
        console.log("渲染页面")
    }

在这里插入图片描述

componentWillUnmount() {
        console.log("卸载页面")
    }

在这里插入图片描述
React的生命周期不止这三个钩子函数，当时常用的只有这三个，具体看官网文档。

localStorage部分：
存储数据：

componentDidUpdate(prevProps, prevState) {
        // 只有上一个数据和这一个数据发生改变的时候才能存储数据，不然空数组多次存储，有点浪费。
        if(this.state.options.length !== prevState.options.length) {
            const json = JSON.stringify(this.state.options);
            localStorage.setItem("options", json)
        }
    }

在这里插入图片描述
读取数据：

componentDidMount() {
        console.log("刷新页面")
        const json = localStorage.getItem("options");
        const options = JSON.parse(json);
        // 判断是否有option
        if(options) {
            this.setState(() => ({
                options
            }))
            // return对象
        }
    }

在这里插入图片描述
其他功能：当没有一个英雄的时候提示请添加第一个英雄。

const Options = (props) => {
    return (
        <div>
            <button onClick={props.handleRemoveAll}>重新开始</button>
            {props.options.length === 0 && <p>请添加你的第一个英雄：</p>}
            {props.options.map( (option, index) => (<Option key={index} option={option} handleRemoveOption={props.handleRemoveOption}/>))}
        </div>
    )
}

在这里插入图片描述
完整代码：

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleRemoveAll = this.handleRemoveAll.bind(this);
        this.handlePickOption = this.handlePickOption.bind(this);
        this.handleAddOption = this.handleAddOption.bind(this);
        this.handleRemoveOption = this.handleRemoveOption.bind(this);
        this.state = {
            options: props.options
        }
    }
    componentDidMount() {
        console.log("刷新页面")
        // try catch防止数据被篡改报错 不合法的json格式
        try{
            const json = localStorage.getItem("options");
            const options = JSON.parse(json);
            // 判断是否有option
            if(options) {
                this.setState(() => ({
                    options
                }))
                // return对象
            }
        }catch(e){
            // 什么都不做
        }
        
    }
    componentDidUpdate(prevProps, prevState) {
        // 只有上一个数据和这一个数据发生改变的时候才能存储数据，不然空数组多次存储，有点浪费。
        if(this.state.options.length !== prevState.options.length) {
            const json = JSON.stringify(this.state.options);
            localStorage.setItem("options", json)
        }
    }
    componentWillUnmount() {
        console.log("卸载页面")
    }
    handleAddOption(option) {
        // 验证
        if(!option) {
            return "选项不能为空"
        }else if(this.state.options.includes(option)) {
            return "不能输出重复的选项"
        }else {
            this.setState( prevState => ({ options: prevState.options.concat([option])}))
        }
    }
    handleRemoveOption(option) {
        this.setState( prevState => ({
            // 让他直接return对象，而不是代码块
            options: prevState.options.filter((item) => {
                return item !== option
            })
            // console.log(option)
            // 拿到上一个数组
            // 注意不能改变原数组的内存
            // 筛选
        }))
    }
    handleRemoveAll() {
        this.setState(() => ({options: []}))
    }
    handlePickOption() {
        const index = Math.floor(Math.random() * this.state.options.length);
        const option = this.state.options[index];
        alert(option)
    }
    render() {
        const title = "帮你决定ba";
        const subTitle = "把你的命交给电脑吧";
        return (
            <div>
                <Header subTitle={subTitle}/>
                <Action 
                    handleAddOption={this.handlePickOption}
                    hasOptions={this.state.options.length > 0} 
                    handlePickOption={this.handlePickOption}/>
                <Options 
                    options={this.state.options} 
                    handleRemoveAll={this.handleRemoveAll}
                    handleRemoveOption={this.handleRemoveOption}/>
                <AddOption handleAddOption={this.handleAddOption}/>
            </div>
        )
    }
}

MyApp.defaultProps = {
    options: ["鲁班7号", "小乔", "蔡文姬", "王昭君", "妲己", "安琪拉"]
}

// 小组件
const Header = (props) => {
    return (
        <div>
            <h1>{props.title}</h1>
            <p>{props.subTitle}</p>
        </div>
    )
}
Header.defaultProps = {
    title: "我就是默认值"
}

const Action = (props) => {
    return (
        <div>
            <button 
                onClick={props.handlePickOption}
                disabled={!props.hasOptions}
                >
                随机输出
            </button>
        </div>
    )
} 

const Options = (props) => {
    return (
        <div>
            <button onClick={props.handleRemoveAll}>重新开始</button>
            {props.options.length === 0 && <p>请添加你的第一个英雄：</p>}
            {props.options.map( (option, index) => (<Option key={index} option={option} handleRemoveOption={props.handleRemoveOption}/>))}
        </div>
    )
}

const Option = props => {
    return (
        <div>
            {props.option}
            <button onClick={() => {
                props.handleRemoveOption(props.option)
            }}>击杀</button>
        </div>
    )
}

class AddOption extends React.Component {
    constructor(props) {
        super(props);
        this.formSubmit = this.formSubmit.bind(this);
        this.state = {
            error: undefined,
        }
    }
    formSubmit(e) {
        e.preventDefault();
        let option = e.target.elements.option.value.trim();
        const error = this.props.handleAddOption(option)
        console.log(error)
        this.setState( () => ({ error,}))
        e.target.elements.option.value = "";
    }
    render() {
        return (
            <div>
                {this.state.error && <p>{this.state.error}</p>}
                <form  onSubmit={this.formSubmit}>
                    <input type="text" name="option" placeholder="请输入要新增的英雄"/>
                    <button>新增英雄</button>
                </form>
            </div>
        )
    }
}

const User = (props) => {
    return (
        <div>
            <p>名字：{props.name}</p>
            <p>年龄：{props.age}</p>
        </div>
    )
}
ReactDOM.render(<MyApp/>, document.getElementById("app"));
星辰大海_enoch
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flink State TTL 详解
SmartSi
03-02 3149
Flink 1.13 版本 在某些场景下 Flink 用户状态一直在无限增长，一些用例需要能够自动清理旧的状态。例如，作业中定义了超长的时间窗口，或者在动态表上应用了无限范围的 GROUP BY 语句。此外，目前开发人员需要自己完成 TTL 的临时实现，例如使用可能不节省存储空间的计时器服务。还有一个比较重要的点是一些法律法规也要求必须在有限时间内访问数据。 对于这些情况，旧版本的 Flink 并不能很好解决，因此 Apache Flink 1.6.0 版本引入了状态 TTL 特性。该特性可以让 Key.
ConnectionState详解
weixin_30872337的博客
11-19 2846
ConnectionState有六个属性值ConnectionState.Broken;与数据源连接断开。只有在连接打开后才有可能发生这种情况。可以关闭处于这种状态下的连接，然后重新打开。ConnectionState.Closed;连接处于关闭状态。ConnectionState.Connecting;连接对象正在与数据源连接。ConnectionState.Executing;连接对象正在执行...
antd的联级选择器异步调用编辑回显_antd二级联动异步加载
weixin_32925455的博客
01-17 476
/*** Created by Admin on 2016/9/19.* 批量导入*/import React, {Component, PropTypes} from"react";import {Link} from"react-router";import {Upload, Icon, Select, Row, Col, Button, notification, Card, Cascade...
Android StateFlow详解
赵彦军
12-13 6803
文章目录一、冷流还是热流StateFlow1. StateFlow使用2. 和LiveData比较3. 如何解决开头的问题 简单描述一下： 点击图中的皇冠按钮，会弹出 Nike、Adidas 和 其他 品牌的按钮，选中之后，页面中数据源只会包含该品牌的数据。 简单看一下，原来的结构，使用的 LiveData： class MainViewModel : ViewModel() { private val selectedBrand = MutableLiveData<String>()
react中的state详解
m0_57479235的博客
07-13 2851
state state中的值可以修改，修改的唯一方法是调用this.setState,每次修改以后，自动调用 this.render 方法，再次渲染组件。（也就是说直接this.state.num=2这样直接修改值是无效的） state在组件的构造函数中赋值（也是唯一可以赋值的地方） class View extends Component{ constructor(){ super(); this.state{ num:10 } } } setState有
flutter中state详解
坚果的博客
02-07 1902
State 在说到StatefulWidget之前，先说下State。State的作用有两点： 在widget构建的时候可以被同步读取； 在widget的生命周期中可能会被改变。 State生命周期 State的生命周期有四种状态： created：当State对象被创建时候，State.initState方法会被调用； initialized：当State对象被创建，但还没有准备构建时，State.didChangeDependencies在这个时候会被调用； ready：State对象已经准备好了
Spring StateMachine详解
热门推荐
思考、总结、专注
05-24 3万+
（转https://www.codetd.com/article/1010726） 一、状态机 有限状态机是一种用来进行对象行为建模的工具，其作用主要是描述对象在它的生命周期内所经历的状态序列，以及如何响应来自外界的各种事件。在电商场景（订单、物流、售后）、社交（IM消息投递）、分布式集群管理（分布式计算平台任务编排）等场景都有大规模的使用。 状态机的要素： 状态机可归纳为4个要素，现态...
Trident State 详解
Heaven Wang 的专栏
10-22 4179
一、什么是Trident State直译过来就是trident状态，这里的状态主要涉及到Trident如何实现一致性语义规则，Trident的计算结果将被如何提交，如何保存，如何更新等等。我们知道Trident的计算都是以batch为单位的，但是batch在中的tuple在处理过程中有可能会失败，失败之后bach又有可能会被重播，这就涉及到很多事务一致性问题。Trident State就是管理这些问
state_dict详解
weixin_36670529的博客
05-02 1万+
在pytorch中，torch.nn.Module模块中的state_dict变量存放训练过程中需要学习的权重和偏执系数，state_dict作为python的字典对象将每一层的参数映射成tensor张量，需要注意的是torch.nn.Module模块中的state_dict只包含卷积层和全连接层的参数，当网络中存在batchnorm时，例如vgg网络结构，torch.nn.Module模块中的state_dict也会存放batchnorm's running_mean。 torch.optim模块中的O
netstat命令中state详解
permike的专栏
02-20 2291
State: 表TCP连接状态 ESTABLISHED指TCP连接已建立，双方可以进行方向数据传递 CLOSE_WAIT:这种状态的含义其实是表示在等待关闭。当对方close一个SOCKET后发送FIN报文给自己，你系统毫无疑问地会回应一个ACK报文给对方，此时则进入到CLOSE_WAIT状态。接下来呢，实际上你真正需要考虑的事情是察看你是否还有数据发送给对方，如果没有的话， 那么你...
pytorch 状态字典:state_dict使用详解
09-18
PyTorch中的`state_dict`是一个非常重要的工具，它用于保存和加载模型的参数。`state_dict`是一个Python字典，其中键是网络层的标识，值是对应层的权重和偏差等参数。这个功能使得在训练过程中可以方便地保存模型的...
State Decision Task活动详解
12-15
tate、Decision 、Task活动详解: State表示一个等待状态。当流程实例执行到state节点时会暂停下来(处于等待状态),流程的执行会在外部触发器被调用之前一直等待(会暂停) Decision条件判断节点,表示在多条路径中选择一...
vuex state及mapState的基础用法详解
08-27
Vuex State及MapState基础用法详解 Vuex 是 Vue.js 应用程序状态管理的插件，提供了一个集中式的状态管理系统。Vuex 通过将应用程序的状态抽象出来，提供了一个可预测的、可维护的状态管理机制。本文将详细介绍 ...
详解Stateflow建模与应用实例.doc
02-11
Stateflow是一种强大的建模工具，特别适用于描述和模拟复杂系统的逻辑和行为，尤其在嵌入式系统设计中广泛应用。它是MATLAB Simulink环境的一部分，能够以图形化方式表示有限状态机（FSM），简化了理解和实现复杂...
stateflow实用教程与案例详解.zip
11-20
本资源详细介绍了MATLAB/Stateflow的使用教程与案例详解，其中包括stateflow入门教程，同济大学Stateflow系统建模技术课程PPT以及详细的案例分析，能够帮助初学者快速入门，掌握stateflow的基础操作，从而开始搭建...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Stateflow状态转移详解
"Stateflow建模技术基础，状态转移，事件驱动，条件，动作，图表更新，浏览器，调试器，查询器" Stateflow是MATLAB环境中用于建模复杂系统行为的一种图形化工具，尤其适合描述和模拟事件驱动和混合动态系统的运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值