react 之 fetch 登录请求formData提交参数

买了一包大鸡排也没心思吃，解决完这个问题后，狠狠地咬了一口大鸡排！

之前每次用 fetch 都是获取数据，没有提交过参数，但是现在做的登录功能，是要将表单中输入的用户名和密码拿到后提交给后台服务器端，并得到返回数据来判断用户名和密码是否正确。

1、 react 表单

按照以往 js 获取表单数据的方法，当然是获取到该 input 的 ID，然后根据 id 定位后获取到其 value 值，但是很可惜，react 不能这样做。

react 对表单元素做了优化处理，对其进行抽象处理，使其使用方式更统一和规范。

约束性组件和非约束性组件

约束性组件，简单来说就是React管理了它的value，而非约束性组件的value则是由原生的DOM管理。
所以在写法上区别很大：

非约束性组件写法：

图片.png

defaultValue 中就是原生DOM中的value属性，非约束性组件中的value值就是用户输入的内容，React完全不管理输入的过程。

约束性组件写法：

图片.png

约束性组件中的value值不再是一个写死的值，而是写在 state 中，由 this.handleChange 负责管理。
在 handleChange 中可以重新渲染 state 的值，同时也可以对输入的内容进行校验。

2、fetch 数据请求

当我们拿到用户名和密码时，需要将数据提交给服务器端并得到返回值。fetch 传参数必须要是 formData，就是这个折磨了我好久。

let url = ".................................";//接口地址

let formData = new FormData();
formData.append('c','login');
formData.append('username', this.state.userName);
formData.append('password', this.state.passWord);
formData.append('client', 'android');

fetch(url,{
    method: 'post',
    body: formData,
}).then(function (res) {
    return res.json();
}).then(function (json) {
    if (json.code == "200") {
        console.log("232323233-----正确")
    }else if (json.code == "400") {
        console.log("2323232323------错了～")
    }
})

终于完成简易的登录功能了。