React-Django学习32-前端添加新建联系人输入框
新建按钮已经加了,这次要把输入框给加上。
首先添加两个state, newName和newGender。
并且处理change event, 由于ReactJS里面推荐的是使用Controlled Components,只要输入change,就更新state,state又去update render。
![1d630659153bd9fd97d367042dda0394.png](https://i-blog.csdnimg.cn/blog_migrate/c5bff07a8f918b7ce0654073b38395e9.jpeg)
添加handleNewName/GenderChange方法。
![42fc9bf8c6d93a1bce1514faef9ae0b8.png](https://i-blog.csdnimg.cn/blog_migrate/6a209e69916bf7bb736711fd2eb10da9.jpeg)
更新handleNewClick方法,点击之后重置newName, newGender state。
![afd99a756f8a56753d9ffa5f8deef0cf.png](https://i-blog.csdnimg.cn/blog_migrate/1fe826fde4b8c8d8f04f4ed84f75e0c8.jpeg)
在render里添加输入框。
![2fb582959e4498635965e6394978d1fb.png](https://i-blog.csdnimg.cn/blog_migrate/ddafbeca282b62c9f83e1d4cfb9f3aa9.jpeg)
Return的时候加上newInputs变量。
![540b24be44b1ab12705765dd8cee50a9.png](https://i-blog.csdnimg.cn/blog_migrate/1312ebfdbe4a2d8699a2b1e3f79ca53e.jpeg)
这样就完成了前端输入框的添加。
初始页面:
![5038ee181e97c68be89ee019938f6ae9.png](https://i-blog.csdnimg.cn/blog_migrate/5e4583401dd2a43f9d50a99e616a4ba5.jpeg)
点击新建
![bc8b961d092e79f3b6fbeb6d53cd4ded.png](https://i-blog.csdnimg.cn/blog_migrate/cc75cf48030ff57d1ce051dca0499aa8.jpeg)
点击确认或者取消,回到原来页面。
完整源码参考:https://github.com/zhangyiant/mysite/tree/v32_20190331
上一篇:React-Django学习31-前端添加新建按钮
目录:
Django学习1-Django的安装
http://toutiao.com/item/6658608486957449731/
Django学习2-如何新建一个Django项目
http://toutiao.com/item/6661960000329482763/
Django学习3-添加一个Django App
http://toutiao.com/item/6662327930816823811/
Django学习4-Django数据库设置
http://toutiao.com/item/6663067257637175811/
Django学习5-Django新建model
http://toutiao.com/item/6663415449637618179/
Django学习6-Django访问model
http://toutiao.com/item/6663623388650537483/
Django学习7-Django Admin的使用
http://toutiao.com/item/6663981781852619278/
Django学习8-url分配
http://toutiao.com/item/6665643107716956680/
Django学习9-数据填入页面
http://toutiao.com/item/6666042928743318028/
Django学习10-给页面添加模板
http://toutiao.com/item/6666220166939935244/
Django学习11-给页面添加模板2
http://toutiao.com/item/6666761240657789453/
Django学习12-给主页面添加链接
http://toutiao.com/item/6667136892108014091/
Django学习13-给联系人页面添加链接
http://toutiao.com/item/6667477480032436747/
Django学习14-使用通用视图类
http://toutiao.com/item/6667852120546345480/
Django学习15-使用通用视图类2
http://toutiao.com/item/6668226696224702988/
Django学习16-安装REST framework
http://toutiao.com/item/6668619035917156867/
Django学习17-编写联系人表list API
http://toutiao.com/item/6668816772872798723/
Django学习18-nodejs安装
http://toutiao.com/item/6669171715236430344/
Django学习19-新建ReactJS项目
http://toutiao.com/item/6669722988981535240/
Django学习20-开发环境前后端集成
http://toutiao.com/item/6670124007242596868/
Django学习21-修改前端显示后端数据
http://toutiao.com/item/6670458618128630275/
Django学习22-添加单个通讯录信息API
http://toutiao.com/item/6670824439245963788/
Django学习23-添加电话号码到API
http://toutiao.com/item/6671199283061981710/
Django学习24-前端显示电话号码
http://toutiao.com/item/6671562709403697667/
Django学习25-添加电话号码管理界面
http://toutiao.com/item/6671800131928457740/
Django学习26-添加ReactJS路由模块
http://toutiao.com/item/6672316450306261518/
Django学习27-添加详细联系人页面
http://toutiao.com/item/6672679788680839687/
Django学习28-添加详细联系人链接
http://toutiao.com/item/6673082921852600835/
Django学习29-更新API URL
http://toutiao.com/item/6673468232348729867/
Django学习30-增加新建API
http://toutiao.com/item/6673807242640228868/
React-Django学习31-前端添加新建按钮
http://toutiao.com/item/6674189381688885763/