实习日记2（与form表单的爱恨情仇1）

xml 复制代码

<>
  <Form.Item
  >
    <Switch />
  </Form.Item>
 
  {isEnabled &&  (
    <Form.Item label=' ' colon={false}>
      <Form.Item>
     ...
      </Form.Item>
    </Form.Item>
  )}
</>

这是我在写代码的时候遇到的一个布局问题，花了我几十分钟解决，希望以后遇到就能长记性了；我想实现的效果是这样的：

于是我自然而然的就让ai项快速帮我解决这个问题，没想到适得其反，同样，在ai给的圈子里面不跳出去反而项越来越复杂的方式去解决，我感觉这更加耗费心神和精力，更重要的是，好像我自己都会跟着变笨！！

因为表单里面的东西有很多值，然后为了保证美观性，它们之间的间隔应该是一样的，就是为了这个间隔！ai很愚蠢的使用两个表单嵌套！仅仅是为了让它占位！用一个label占位，再嵌套一个，现在我回想起来，后面的布局问题都是因为这个圈子造成的！回想起来，就算占位也可以直接使用一个表单的label而不是这种方式，因为嵌套item还会自动带有下边距样式，以至于原本我想要的是上面这样，现在则变成了这样：

所以，现在从一个问题，就变成了多个问题要解决！！！但是当时的我走到了ai的固定路线，根本没有想过，所以，我就想办法去解决多个问题：

当显示绿色的时候，红色的下边距要比不显示的时候近一点，同时，显示绿色的时候要解决和黑色表单的间距过大的问题，于是，我就几个样式加条件解决了，丝毫没有发现写了一坨💩：

xml 复制代码

  <Form.Item
    style={{ marginBottom: isEnabled ? 8 : 16 }}
  >
    <Switch />
  </Form.Item>

  {isEnabled  && (
    <Form.Item label=' ' colon={false}>
      <Form.Item
        style={{ marginBottom: 0 }}
      >
       ...
      </Form.Item>
    </Form.Item>
  )}

直到mt给我cr代码。。。下面是我们的对话：

mt：你为什么要写两个表单项嵌套

我：因为要缩进一个字符

mt：你都写表单了，读取为什么还要专门get

我：因为我多写了个表单项嵌套，读取不到原来的了

mt：你这怎么写这么多样式

我：因为我多写了个表单项

mt：就为了解决缩进，你造成了这么多麻烦，为什么不想着去解决缩进呢？你这治标不治本啊

我：对啊（连滚带爬的跑去改代码）

于是，在mt的点拨下，我把代码改成了这样：

xml 复制代码

<Form.Item > 
<Switch /> 
</Form.Item>

<Form.Item label=' ' colon={false} >
        ...
</Form.Item>

中途发现：表单项读取不了初始值是因为没有加valuePropName='checked'

valuePropName='checked' 是Ant Design Form.Item组件的一个重要属性，用于指定表单字段值的属性名。

具体作用：告诉Form.Item组件，表单字段的值应该绑定到子组件的 checked 属性上，而不是默认的 value 属性

之后就完美的解决啦！！！

其实这是一个很简单的情况，但是也反映了一个问题，如果只是一味的靠ai而不自己去思考，真的会变得无脑；同时我由于大部分时间用ai，已经很久没有手写了，很多组件api都忘了，导致一些明明很简单的api调用，却要拐弯抹角的另寻他路，还有就是之前走过的坑没有记录，让一些事情重复一遍又一遍！！

还有更多的因为用ai写的事故，后续记录，坚决不重复踩坑～