react里做一个修改效果_react 表单编辑（修改）

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

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

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

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

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

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

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