Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在颤动中将表单发送到API

我还在努力适应颤动。我有一个用户的注册表,当用户单击按钮时,我希望所有文本都发送到我的link.But接口。有没有简单的方法可以做到这一点?或者我应该一个接一个地发短信?我的文本不应该是空的。我怎么才能提供这个呢?

我将在将来调用我的api,并且我想发送用户将在此处输入我的数据的文本。

代码语言:javascript
运行
AI代码解释
复制
        Future<RegisterComplete> createRegisterComplete(
        String email, String language) async {
      final http.Response response = await http.post(
        'MY API URL',
        headers: <String, String>{'Content-Type': 'application/json'},
        body: jsonEncode(<String, String>{
          'firstName': ' ',
          'lastName': ' ',
          'password': ' ',
          'countryCode': ' ',
          'language': ' ',
        }),
      );
      if (response.statusCode == 201) {
        return RegisterComplete.fromJson(json.decode(response.body));
      } else {
        print('Here:${response.statusCode}');
        throw Exception('Failed to load page');
      }
    }
    
    class RegisterPage extends StatefulWidget {
   
      @override
      _RegisterPageState createState() => _RegisterPageState();
    }
    
    class _RegisterPageState extends State<RegisterPage> {
      Future<ConfirmCode> _confirmCode;
      var textFieldPasswordController = TextEditingController();
      var textFieldConfirmPasswordController = TextEditingController();
 var cityController=TextEditingController();
  var nameController=TextEditingController();
  var surnameController=TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        IconButton(
                          icon: Icon(Icons.arrow_back),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                        Text(
                          allTranslations.text('login'),
                          style: TextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.w600,
                            color: HexColor('#4A8EB0'),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Text(
                      allTranslations.text('signUp'),
                    style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
                  ),
                  _paddingWidget('E-mail', 'E-mail',emailController),
                 
                _paddingPasswordWidget(allTranslations.text('password'), allTranslations.text('password')),
                  _paddingWidget('City', 'City',cityController),
                  _paddingWidget('Name', 'Name',nameController),
                  _paddingWidget('Surname', 'Surname',surnameController),
                  Padding(
                    padding: EdgeInsets.all(16.0),
                    child: Container(
                      height: 50.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        color: HexColor('#B0B0B0'),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.05),
                            blurRadius: 6,
                            offset: Offset(0, 2), // changes position of shadow
                          ),
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 20,
                            offset: Offset(0, 10), // changes position of shadow
                          ),
                        ],
                      ),
                      child: InkWell(
                        onTap: () {
                          setState(() {
                          BUTTON I USE FOR SİGN UP
                          });
                        },
                        child: Center(
                          child: Text(
                            allTranslations.text('signUp'),
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
      _paddingWidget(String hintTextStr, String labelTextStr,TextEditingController _controller) {
        return Padding(
          padding: EdgeInsets.only(top: 15, left: 22, right: 22),
          child: TextFormField(
            controller: _controller,
            keyboardType: TextInputType.text,
            style: TextStyle(
              color: HexColor('#868686'),
            ),
            decoration: CommonInputStyle.textFieldStyle(
              hintTextStr: hintTextStr,
              labelTextStr: labelTextStr,
            ),
          ),
        );
      }
    
      _buttonWidget(String title,GestureTapCallback onPressed) {
        return Container(
          height: 40,
          width: 160,
          child: RaisedButton(
            child: Text(
              title,
              style: TextStyle(color: Colors.white),
            ),
            onPressed: onPressed,
            color: HexColor('#4A8EB0'),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          ),
        );
      }
    
      _paddingPasswordWidget(String hintTextStr, String labelTextStr) {
        return Padding(
          padding: EdgeInsets.only(top: 15, left: 22, right: 22),
          child: TextFormField(
            controller: textFieldPasswordController,
            keyboardType: TextInputType.text,
            style: TextStyle(
              color: HexColor('#868686'),
            ),
            decoration: CommonInputStyle.textFieldStyle(
              hintTextStr: hintTextStr,
              labelTextStr: labelTextStr,
            ),
            obscureText: true,
          ),
        );
      }
EN

回答 1

Stack Overflow用户

发布于 2020-09-17 09:30:16

首先。

这个方法应该包含var data,它将成为你身体的处理器。

如下所示:

代码语言:javascript
运行
AI代码解释
复制
Future<RegisterComplete> createRegisterComplete(
    String email, String language, var data) async {
  final http.Response response = await http.post(
    'MY API URL',
    headers: <String, String>{'Content-Type': 'application/json'},
    body: jsonEncode(data),
  );
  if (response.statusCode == 201) {
    return RegisterComplete.fromJson(json.decode(response.body));
  } else {
    print('Here:${response.statusCode}');
    throw Exception('Failed to load page');
  }
}

现在,这允许您实际包装来自TextEditingControllers的所有数据,因此您可以执行以下操作:

代码语言:javascript
运行
AI代码解释
复制
child: InkWell(
                        onTap: () async {
                          setState(() {
                          var data = {
                            'firstName': nameController.text,
'lastName': lastNameController.text,
          'password': passwordController.text,
          'countryCode': countryCodeController.text,
          'language': languageController.text,

                          }

// here you do an actual API call
   await createRegisterComplete(emailController.text, languageController.text, data);


                          });
                        },

但有一种更好的方法来实现这一点,那就是使用存储库来处理这样的事情。

查看博客-> https://medium.com/@cesarmcferreira/flutter-mvvm-architecture-using-dependency-injection-di-state-management-repository-pattern-92a4ef6ddfc3

但还有更多的例子

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63934866

复制
相关文章
React 钩子:useState()
React 是一个流行的JavaScript库,用于构建用户界面。在 React 16.8 版本中引入了钩子(Hooks)的概念,它为函数组件提供了状态管理和其他功能。本文将着重介绍最常用的钩子之一:useState()。
网络技术联盟站
2023/07/13
3880
React 钩子:useState()
React技巧之将useState作为对象数组
原文链接:https://bobbyhadz.com/blog/react-typescript-usestate-empty-object
chuckQu
2022/08/19
2.7K0
React技巧之将useState作为对象数组
React技巧之移除状态数组中的对象
原文链接:https://bobbyhadz.com/blog/react-remove-object-from-state-array[1]
chuckQu
2022/08/19
1.4K0
React技巧之移除状态数组中的对象
【react hooks】属性作为useState 初始值,属性改变useState 不改变问题?
发现visible 此时为ture ,界面也重新render了,但是modelVisible 为false。
星宇大前端
2022/03/09
2.1K0
react中的useState源码分析
简单说下为什么React选择函数式组件,主要是class组件比较冗余、生命周期函数写法不友好,骚写法多,functional组件更符合React编程思想等等等。更具体的可以拜读dan大神的blog。其中Function components capture the rendered values这句十分精辟的道出函数式组件的优势。
flyzz177
2022/12/14
5070
useTypescript-React Hooks和TypeScript完全指南
React v16.8 引入了 Hooks,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用,从而易于共享逻辑。Hook 令人兴奋并迅速被采用,React 团队甚至想象它们最终将替换类组件。
前端森林
2020/04/23
8.6K0
useTypescript-React Hooks和TypeScript完全指南
美丽的公主和它的27个React 自定义 Hook
在上一篇git 原理中我们在「前置知识点」中随口提到了Hook。其中,就有我们比较熟悉的React Hook。
前端柒八九
2023/10/25
7880
美丽的公主和它的27个React 自定义 Hook
React常见面试题
动态加载(异步组件)加载时会有延迟,在延迟期间可以将一些内容展示给用户,比如:loading
隔壁老陈
2023/01/12
4.2K0
React常见面试题
10分钟教你手写8个常用的自定义hooks
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks的介绍也很详细,所以大家不熟悉的可以看一遍官网。
徐小夕
2020/03/13
3.6K0
React技巧之将useState作为对象
原文链接:https://bobbyhadz.com/blog/react-type-usestate-object[1]
chuckQu
2022/08/19
9680
React 中的 useState() 是什么?
在 React 中,useState() 是一个用于在函数组件中声明状态的 Hook。它是 React 16.8 引入的一种新的状态管理方式。
王小婷
2023/09/15
7350
React报错之Too many re-renders
产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因:
chuckQu
2023/02/13
3.4K0
React报错之Too many re-renders
[译] 对比 React Hooks 和 Vue Composition API
原文:https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32
江米小枣
2020/06/15
6.7K0
你需要的react面试高频考察点总结
函数式组件(Functional component)根本没有实例instance。类组件(Class component)有实例instance,但是永远也不需要直接创建一个组件的实例,因为React帮我们做了这些。
beifeng1996
2022/11/08
3.6K0
换个角度思考 React Hooks
从 Vue 迁移到 React ,不太习惯 React Hooks 的使用?也许换个角度思考 Hooks 出现的意义会对你有所帮助。 1 什么是 Hooks 简而言之, Hooks 是个函数,通过使用 Hooks 可以让函数组件功能更加丰富。 在某些场景下,使用 Hooks 是一个比使用类组件更好的主意。 1.1 Hooks 出现的背景 在 Hooks 出现之前,函数组件对比类组件(class)形式有很多局限,例如: 不能使用 state、ref 等属性,只能通过函数传参的方式使用 props 没有生命周
用户1097444
2022/06/29
4.8K0
换个角度思考 React Hooks
浅谈Hooks&&生命周期(2019-03-12)
现在流行的前端框架,无论是angular还是React,又或是Angular2以及以上,都由框架自身提供了生命周期(有的叫生命周期钩子)供开发者使用。
贺贺V5
2019/03/20
3.3K0
浅谈Hooks&&生命周期(2019-03-12)
快速了解 React Hooks 原理
我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能?
前端小智@大迁世界
2019/08/20
1.4K0
快速了解 React Hooks 原理
React源码中的useState,useReducer
大家都知道hooks是在函数组件的产物。之前class组件为什么没有出现hooks这种东西呢?
goClient1992
2022/12/07
1K0
React Hooks
以前,React API 只有一套,现在有两套:类(class)API 和基于函数的钩子(hooks) API。
Leophen
2021/07/13
2.1K0
搞懂了,React 中原来要这样测试自定义 Hooks
React 中自定义的 Hooks 为开发者提供了重用公共方法的能力。然而,如果你是一个测试新手的话,测试这些钩子可能会很棘手。本文中,我们将探索如何使用 React Testing Library 测试库来测试自定义钩子。
前端修罗场
2023/10/07
4680
搞懂了,React 中原来要这样测试自定义 Hooks

相似问题

React useState钩子-更新对象的状态

227

如何对react中的对象数组使用UseState钩子

12

React useState钩子访问状态

22

React.js状态对象与useState钩子?

20

使用React中的useState钩子将数组插入状态

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文