51_尚硅谷_React全栈项目_Category组件_显示隐藏添加或更新的界面

好，那也就是说我们现在已经把一级列表和二级列表的查看是不是都做好了，下面还剩下两个功能。一个添加，还有一个什么。修改，而这个添加和修改都是先是显示了这样一个确认框板。而且这个券框的内部都有一个表单。只是他没有提供表单的按钮，因为他这个确实它本身就按钮是不是。这能看懂吗？每一个啊都有来，我们先来去把这两个。框给它做好。那这个框呢，需要用到一个组件，咱写过。对，嗯，大写的好。但这一次跟我们上面前面用法不太一样，上一次我是不是当成一个对象调查的form方法，这一次可不一样，因为这一次更加复杂。

你看里面你要搞个这样的结构出来，那是很费劲的，那应该怎么做呢？看好了去找一个，找一下那个它这个里面。另外一个组件就对个框是吧，打开了右键打开啊好，这个不要了。我们来看一下。我们就来看一下第一个。你看这就不是一般的。那个刚才前面的这种出框了，大家看这个这个就是出框。呃，这个不是普通的计，就是说前面是不是调用一个方法来考虑呢。这个不是，那怎么做的呢。看好了。这个地方它其实。

可以写成对应的什么标签，听懂了吧，那也就是说我现在。要在我的这个组件里面去渲染两个。我。一个用来去干嘛的。添加分类的另外一个呢。修改或者更新机都行，对不对，这领导。好，这个地方是什么意思？大家看名字大概其实都能知道什么意思。是否可以见对不对，而这个他是不是从状态里面读到了一个状态值，它应该是个什么类型的值。肯定说不类型吧，那自然处就代表什么显示。那过时就代表什么隐藏。那也就是说我。

如果要生效点，它是不是要去改，让那个值为。懂不能懂，但是这个时候有一个事情，我们是不是有两个框。要显示其中的某一个，其实我们现在有三种情况。一种，两个都不显示。啊，一种显示添加一种显示什么更新是吧，那我就有这样一个设计，我也没必要设计两个变量了，按理来说应该设计两个类，多少类型的变量，我现在设计一个变量来控制他们两个显示隐藏，因为一共有三种情况，那就三个值。啊，我叫什么名字，看好叫status。就是显示的状态啊，我初始值为零，这个是标识啊，确认框，这个添加或者什么更新的确框是否显示零呢，自然就什么。

都不显示。能听懂吧，那后面是不是还有两个数据，那我就用一和二吧，那一代表显示什么呢？添加可以吧，但这个绝对了吗。必须是一来代表显示添加吗？不是是我设计的对不对啊，代表什么显示什么更新。哎，我能用不值来表达吗？不能，因为我一共有三种情况，是不是你要用不值，那你得用两个变量。听懂了吧，来，那有了它之后，那我们的这个事情就简单了。

来看好了。那现在呢，我们就可以去这么做。嗯，取出我状态里面的这个数据，这个前面一起取得了这个数据吧。那什么时候我的添加分类的这个圈框显示了，就要看它等不等于什么一，那我的更新什么时候显示呢。那就看他等不等于什么啊。能听到吗？好，下面他还有OK啊，是干嘛的哟。OK，指定的回调函数什么时候调啊？这个用来指定回调函数的，这个也用来指定回调函数了，就大家应该拆拆到这一个回调函数，是不是当我点击了确认的时候调啊，那点击这个添加的确认我应该干嘛去啊，是不是添加分类句。

是不是而点击下面的了。那应该是更新什么分类句。能听懂不能，那下面我点击取消的时候，是不是应该去关闭我们的这个券框，这个圈框不会自动关掉，因为它是靠我们这这个状态值来去操作的，听懂不。所以我们这个地方啊，这个地方啊，就是就写个他的话，那我这个地方我应该怎么写啊，现在我这两个写一个方法就知道为什么。因为都超过它是不是，那你说现在我有几个回调函数需要写啊。123是吧，是不是写三个回调函数。

这个最简单，是不是把他先搞六。来看我们自己的，写在我们自己的位置上面啊，来看好了这个啊，实际上是嗯，响应取点击取消啊，点击取消其他干嘛去啊。三是不是隐藏那个券花啊，隐藏券花。来看看我们做一下啊，这个是受简单直接给他实现得了任意时间set state。啊，接着指定那个数是是为什么零，能听懂不？可以吧，可以，我们还有两个东西，还有两个回答函数，一个是添加分类。

还有一个是什么更新分类啊，Category更新分类，大家听到不来，我们把这两个方法啊写一下，这个名字不能随便下起来，因为已经写过了。由于我就是按照特定的规律写的，所以这个名字啊应该对的添加分类。是这个吧，好，还有一个是什么。Of category。你觉得吧？OK吗？OK，好。来，当然了，我们可以在这里面，在这个不是一条鱼能实现的，所以怎么办呢？嗯，先打一个它的，诶这个地方说个事情，它至少要当个小势啊。他要去真正的去请求，当然最后要不要关闭选框。要要啊要了吧，你要想去他不会自动关闭了啊，你看我现在不写他肯定不会关啊，等会就能看到三个函数都写好了吧。

三个函都写好了，好，下面要说什么时候来去显示那个添加了。帮我点他的手吧。是不是？那我这里面怎么做on可立，我们也单独写一个孩子，专门写孩子叫ho什么呢，爱？可以吧，显示添加来显示添加，其实实现起来也比较简单。来看着啊，我们这是做添加剂的，是不是在前面把这个写是添加写在它的前面的。这个方法调用的效果是什么？显示添加的什么选框，那这个不实现起来so easy吗？

怎么做this点三指定我的那个修是是为几啊。我们要显示添加了不012吗？零代表隐藏，一代表添加二代什么？这个能看到啊，记住啊，是让它更新为一是不是啊好，那什么时候去显示更新的确按钮呢。好，这个时候来看好了，应该在这里面。啊，放到对应的位置啊，这个稍微贷款会越来越多了啊，这个时候就翻的时候就稍微有点费眼睛。修改。能看到不，那修改的时候来看好了，那这个时候我也来个什么。

那我是不是写this update？能听到不好，那这个时候我们需要去写它来看好了。这一个啊，这一个这是去。应该还在下面吧。写在一个合适的位置啊，这不是去更新分类去了吗？把这个写在它上面得了。套这个吧，好来，暂时我们就这写的来这个是干嘛的了，很简单，是显示。券框当时是哪个框？是不是修改或者要更新的状况对吧，那我这个地方做的事情跟这差不多，变化的是什么。

把一变为什么啊。来我们来去大致的看一下我们的这个啊，我把这个稍微改改。这一个应该是我添加的界面啊，添加界面写一个啊标表意一下。这个是我什么呢？啊，更新修改的界面对吧，更新的界面但还没写，是不是还没写，我们先看这个切换显示隐藏这个事情能不能做啊，能做以后再去做界面啊，你这个事情难度也不大，先把这个简单的事情先搞定来看一下，先说添加走理。苏婷的。他取消的时候什么时候会取消，有两种情况啊，甚至说可以有三种情况，一种是点取消。能看到吧，还有。

点叉叉，他还有一个。点这个什么，这个这个部分叫什么部分遮对吧，能看到吧，他都会去触发谁啊取消的回调，而我在取消回调里面是不是指定那个值状态值为零啊。答，我点OK，你看他现在关吗？为啥不关呢，你看。调换我那个添加了没有，现在我是不是说要去添加分量啊，但是为什么不关呢？因为我的状态你没有改呀，是不是，所以说点添加之后肯定也要去把这个状态改为零吧，啊先留着等会改都没关系，反正我们的界面还没写。这是一个吧，还一个。点他是不是。显示的是更新的吧，没问题。

OK吗？OK，可以，当然你现在点确定。它也关不了是不是，当然那个回调函数还掉了呢。回调函数还行是吧，能看到吧，能。好，先要做到这一步啊，做到这一步我们下一步就可以去啊。写他的界面啊。