前提:
antd的表单Input,Selcet,多选check不像在Vue,数据与视图实时绑定,view刷新数据跟着变。
由于react是单向数据流,数据变化了才会同步到视图,因此需要另一种方式来实现。
举例Input:
/**
**思路:**
给Input设置value、onChange属性,在onChange时修改兵保存value的值。同Select、checked。
如果一个onChange事件要一次修改保存多个Input、Select,checked。
可以在onChange事件函数中定义一个对象,传给onChange函数的参数再多出一个作为标识,
第二个值默认是改变后的====>最新值。
*/
valueChange = (type, value) => {
let valueChange = {}
dataChange[type] = value
/**
ps:对象使用[]存键名,可存储特殊键名
例如obj["123"] = 789
obj["#@^%Gd"] = 666 都是正确的
这里使用obj[]就更加灵活
*/
/**
此处相当于将一条有键所对应的Input、Select,checked变化后的Value值存储到一个对象了
*/
// 那么每次在有一条数据的value发生变化的时候,重新修改这个对象即可!
}
//*** 使用 hook
const [dataChange, setDataChange] = useState({})
valueChange = (type, value) => {
dataChange[type] = value //此时dataChange原值已被更改
// 更新更改后的dataChange
setDataChange(dataChange)
}
// view
<Input
value={dataChange.inputs}
onChange={() => valueChange("inputs", e.target.value)}/>
// 使用 类式组件
export defalut Class Demo extends Component{
cconstructor(){
super()
this.state = {
dataChange : {}
}
}
valueChange = (type, value) => {
let dataChange = {}
dataChange[type] = value
this.setState({dataChange})
}
}
// view
<Input
value={dataChange.inputs}
onChange={() => this.valueChange("inputs", e.target.value)}/>
其他:
/**
1) 防抖处理
背景:在做webscoket推送时,需要重新刷新页面,以体现实时更新的效果。
但是有个问题,webscoket推送太快后面页面会非常卡,刷新频率太快不利于用户操作,也影响美观
解决方法:(防抖)控制数据更新频率
*/
// code
function debounce(fn,delay){
let timer = null //借助闭包维护全局纯净
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
// 在调数据接口的地方调用 debounce(),传入请求数据接口的函数和希望延迟的时间
相关资料地址:https://segmentfault.com/a/1190000018428170
/**
2)
关于git为什么先pull
先pull 最后再push 的情况就是为了应对多人合并开发的情况
*/
/**
3) 问题:
在用到一个视频插件的地方给包裹它的元素position,给这个元素的父级realtive,
结果子元素不显示了,去除掉父级的realtive就能正常显示,此问题尚未解决,仍在思考中!
对于相对,绝对定位的理解有待加深。
*/