react 之 fetch 登录请求formData提交参数
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 之 fetch 登录请求formData提交参数相关的知识,希望对你有一定的参考价值。
参考技术A 买了一包大鸡排也没心思吃,解决完这个问题后,狠狠地咬了一口大鸡排!之前每次用 fetch 都是获取数据,没有提交过参数,但是现在做的登录功能,是要将表单中输入的用户名和密码拿到后提交给后台服务器端,并得到返回数据来判断用户名和密码是否正确。
1、 react 表单
按照以往 js 获取表单数据的方法,当然是获取到该 input 的 ID,然后根据 id 定位后获取到其 value 值,但是很可惜,react 不能这样做。
react 对表单元素做了优化处理,对其进行抽象处理,使其使用方式更统一和规范。
约束性组件和非约束性组件
约束性组件,简单来说就是React管理了它的value,而非约束性组件的value则是由原生的DOM管理。
所以在写法上区别很大:
非约束性组件写法:
defaultValue 中就是原生DOM中的value属性,非约束性组件中的value值就是用户输入的内容,React完全不管理输入的过程。
约束性组件写法:
约束性组件中的value值不再是一个写死的值,而是写在 state 中,由 this.handleChange 负责管理。
在 handleChange 中可以重新渲染 state 的值,同时也可以对输入的内容进行校验。
2、fetch 数据请求
当我们拿到用户名和密码时,需要将数据提交给服务器端并得到返回值。fetch 传参数必须要是 formData,就是这个折磨了我好久。
终于完成简易的登录功能了。
以上是关于react 之 fetch 登录请求formData提交参数的主要内容,如果未能解决你的问题,请参考以下文章