react 表单编辑(修改)

前言:很多人在react项目中会使用到ant design的UI组件,虽然功能强大,但是样式修改起来十分费劲,像简单的form表单input输入校验提交,用ant实在大材小用。

功能需求:input输入框中有些有默认值,但是只有点提交的时候才会储存修改的值。

1.首先肯定得设置this.state,获取组件传递的默认值,后面有一个布尔值是模拟真实场景可能存在的情况,也是后面save函数的值不从this.state传递,而是从localValue传递的原因。构造函数中给事件绑定this(this.changeInputValue.bind(this)),对不懂es6箭头函数的同学是一个较好的方式。

4653128-78daa9a1da55f134.png

2.form表单dom结构的编写,在react中如果有默认值并且可修改,必须牢记使用defaultValue,而不是value,value不可以修改。对于一行较多事件或样式的标签,推荐以下写法。下图主要作用是设置默认值,绑定事件,然后使用name做关联。

4653128-221d675f8a1b24e1.png

3.新增定义一个全局变量,类似本地缓存的数据,做一个数据间的桥接。因为组件内部函数需求读取,所以设置的默认值都为空。


4653128-9a464cdd0e5ad292.png

4.事件方法,e.target就是当前的input框以及内容,感兴趣的同学可以打印e,以及e.target查看元素。第一个函数主要做的是保存值的一个操作,监听onChange。第二个函数主要是遍历localValue的属性并且将提交的值赋给this.state中的属性,当页面其他地方需要用到修改的属性值,通过此举就可以直接赋值了,或者再次编辑时。localValue[k] = this.state[k],当有些内容由更改,有些内容没有更改时,需要把现在状态的值赋给localValue。

4653128-6e41e8a9cf8d10b6.png

5.接下来就是连接服务器的事了,不多做说明。

展开阅读全文

没有更多推荐了,返回首页