React 绑定 onClick 事件不生效问题分析，原来是绑定方法二不归！初学需注意

Posted 2022-08-04 毕小宝

背景

上周碰到一个小问题，有同事在系统配置查询的控制器里添加了一项配置，照样子复制了三行代码，然后直接提交了。我在 SVN 更新比对的时候，发现虽然只有三行代码，但是也是一个不同的逻辑啊，没有改全就提交了。

这让我想起以前在阮大神的网络日志时看到的一段话：

我从互联网上得到的最好的经验之一，就是永远不要复制和粘贴不是自己编写的代码。如果你一定要复制，那就照着它逐字输入，逼着自己思考，这些代码实际上是什么意思。

是的，复制代码，如果觉得很简单，不想启动环境测试的话，最好的方法是目测，然后 SVN 比对分析，看看改了什么，有没有改完整。从以往的经验来看，无论复制什么代码，只要心里感觉太简单，有所松懈，就可能有坑！

言归正传，开发的闭环，总结经验，为后续排坑做准备，近期 React 前端开发的问题。

React 绑定事件不生效问题

问题描述：一个简单的 Div ，上需要加点击事件，随便模仿写了下，发现怎么都不会触发，我是这么写的：

<div  onClick=()=> this.doAction1>导出</div>
<div  onClick=()=> this.doAction2>查询</div>

问题原因：绑定方式错误了，onClick 是一个属性，要么直接指向一个固定的值，要么是一段 lambda 表达式的调用代码，上面这个恰好弄了一个二不归，所以事件方法不会执行。

解决方法一：直接指定事件方法，没有参数的话

onClick=this.doAction1 

这个事件属性执行一个方法定义，会固定传递一个 (e) 的事件参数给目标方法。

解决方法二：如果需要给调用方法传递特殊参数，就需要用匿名函数的方法指定事件属性：

onClick=(e)=>this.doAction(e, temp.type) 

这里的 temp.type 是事件之外的参数，因为这个 Div 是动态生成的，目标函数需要接受具体的数据。

自定义表单样式覆盖 React 样式

问题描述：antd 的表单验证不通过的默认样式不明显，大概是这样：

问题分析：可能是用的前端库中的样式又问题，定位到这个错误文字的地方，找到样式名称 ant-form-item-explain-error，页面调整了下样式生效了，所以解决办法就是重写默认样式。

解决办法：重写样式，且要保证覆盖 antd 的样式，需要这样写：

:global .ant-form-item-explain  .ant-form-item-explain-error 
	width: 200px;
	color:#ff4d4f;
	margin-top:5px;
	position: relative;

生效后的结果：

另外一点，如果 Form.Item 的高度过低，出现校验信息后，表单会出现一种跳动的感觉，因为显示错误提示信息后，原始变高了，有扩张。解决办法就是调高一点 Form.Item ，流出提示信息的位置。

多个 Form 表单绑定到同一个对象的问题

问题描述：页面上有多个 Form 表单，但是 ref 属性指向了同一个 React.createRef() 对象，那么在这个对象上的操作会出现什么问题呢？

对 formRef 对象的操作，如 this.formRef.current.resetFields() /setFields 只会在页面上最后一个绑定这个对象的组件上看到操作结果。

所以，结论是，如果页面上有多部分区域需要表单信息，不能都指向同一个，需求拆分成多个不同的表单对象，彼此独立的引用。

最后的保存操作可以由最后一个 Form 触发，然后通过直接操作表单对象，获取其他表单的配置信息。

Switch 组件编辑元素显示问题

问题描述：开关组件放在表单中，初始化值没有生效。

解决办法：加上特有的 valuePropName="checked" 属性。

<Form.Item label="是否启用" name="elag" valuePropName="checked" >
  <Switch checkedChildren="是" unCheckedChildren="否"/>
</Form.Item>

如果直接用 checked 属性设置了状态，就不能操作了，下面这种尝试是不可行的：

<Switch size="small"  
  checkedChildren="是" 
  unCheckedChildren="否" 
  checked=record.flag===1 />

像这样 record.flag=1 ，显示后就是选中状态，点击切不到未选中状态，因为这个属性值已经固定了。

最后记录两个 Linux 命令

运维打包时，两次结果不一样，少了一个压缩命令：

1. tar -zcvf xxx.tar.gz 目录名称 ，z 参数是指定压缩的。
2. tar -cvf 不压缩。 c,create 创建压缩文件。
3. tar -vf 解压文件名称
4. vim 全局替换 :%s/s1/s2/g 。

互联网如此便捷，我的大脑以为它不需要记命令了，每次都要搜一下上面的命令，也是挺烦恼的，海量的搜，还是自己记录下来，直接找。