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.接下来就是连接服务器的事了,不多做说明。

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,278评论 19赞 139
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,993评论 1赞 18
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,719评论 25赞 708
  • 原文地址:React.js Forms: Controlled Components 原文作者:Loren Ste...
    pobusama阅读 866评论 0赞 2
  • 圣诞节了呢。一年时间过得好快。晚上自习的时候又抽风了一样胡思乱想。看了一篇微博的帖子,很有感触。我总是在想,如果当...
    我和我的小太阳阅读 215评论 0赞 0

友情链接更多精彩内容