总结最近React组件开发遇到的一些问题

1. 深浅拷贝的问题

做了一个审批链的弹窗页面,其中有一个通过后端获取数据,根据不同的type显示数据或者显示输入框,做数据收集的一个东西,提交出错时回去编辑输入框发现一闪而逝,输入框不见了,究其原因,看了眼控制台并没有报错,然后看状态管理和生命周期,还有表单的一些api都查了一遍,没有发现问题,最后通过大佬指点(大佬还真的就是大佬), 说这是一个深浅拷贝的问题,因为渲染的数据还被引用着,提交的时候被我改了type,回显的时候就不在是一个输入框了,所以提交之前得做点什么

//把数组重新JSON解析一遍 就是一个最简单深拷贝了
const arr = JSON.parse(JSON.stringify(applyChainArr))
// 然后拿到这个新的arr去做事~ 就这

2. 表单的一些api,用的是antd 的组件Form

const [form] = Form.useForm() 
//Form有一个props就是form 绑定之后就可以做一些事情了
form.resetFields() //重置表单 一般要清空数据时操作
form.validateFields().then(values=>{
// 返回表单值
}).catch(err=>{
	//校验的错误信息 不过一般不这样做 因为页面上失去焦点时会显示错误提示信息
	 const errorMsg = err.errorFields[0].error[0]
	 message.error(errorMsg)
}) 
//用于回显或者主动设置表单值
form.setFieldsValues({
name:"Hello World!"
})

3. scss 的一点小技巧

$textColor: #606266; /* 定义常量 */
/*
	修改antd组件自带样式 得加个 :global{ } 包裹着才行
*/
:global{
	.ant-modal{
			.ant-model-content{
				color: $textColor;
			}
	}
}

/*mixin用法*/
@mixin fontStyle($fontSize) {
  font-size: $fontSize;
  font-family: 'mono-font';
}
.header {
 @include fontStyle(20px);
}
.footer{
 	@include fontStyle(15px);
}

/* 遍历 */
.input{
	&:focus{
		outline: none;
	}
  @each $browser in -webkit-input-,-moz-,-ms-input-,''{
    &::#{$browser}placeholder {
    		color: #bfbfbf;
    }
  }
}