TextFormField onSave 和onChange

背景:用户在注册发送验证码的时候,发现一直获取不了_username

原因:_username 用的是 TextFormField onSave 由于这个时候表单并未提交,未触发onSave事件,所以一直取不到_username的值。

Dart 复制代码
  submit() {
    var state = this._formKey.currentState;
    if (state != null && state.validate()) {
      state.save();
      Future(() async {
        return OauthService.loginVerCode(
            _username, _validateCodeId, _validateCode);
      }).then((value) =>
      {
        if (value) {Navigator.pushNamed(context, '/')}
      });
    }
  }

在Flutter的TextFormField中,onSaved和onChange是两个重要的回调函数,它们分别用于处理表单字段的保存逻辑和实时输入变化。下面是这两个属性的详细说明及如何使用它们:

  1. onSaved

用途: 当调用FormState.save()方法时(通常在表单提交时),会触发onSaved回调。这个回调适合用来验证用户输入并持久化数据到模型对象中。

参数: 接受一个ValueSetter<T>类型的参数,其中T是TextFormField的controller的text属性的类型(通常是String)。这个回调允许你直接对表单字段的值进行操作或存储。

示例:

Dart 复制代码
TextFormField(
  onSaved: (value) {
    // 这里的"value"就是用户输入的内容,你可以在这里进行数据验证和保存操作
    // 例如:
    _username = value; // 假设_username是类的一个成员变量,用于存储用户名
  },
)
  1. onChanged

用途: 每当TextFormField中的文本发生变化时,就会调用onChanged回调。这个回调适用于实时响应用户输入,比如进行实时验证或更新UI。

参数: 接受一个ValueChanged<String>类型的参数,即每当文本变化时都会调用的函数,传入最新的文本值。

示例:

Dart 复制代码
TextFormField(
  onChanged: (value) {
    // "value"是当前输入框的最新值,可以在此处执行实时验证或更新其他UI元素
    // 例如显示字符计数或即时反馈输入是否有效
    setState(() {
      _inputText = value; // 更新状态,以便可能影响UI的其他部分
    });
  },
)

综合使用

通常,onChanged用于提供即时反馈或动态处理,而onSaved则在表单提交时用于数据验证和最终保存。结合两者,可以创建交互性好且健壮的表单体验。

Dart 复制代码
TextFormField(
  onChanged: (value) {
    // 实时处理逻辑
    setState(() {
      _username = value;
    });
  },
  onSaved: (value) {
    // 表单提交时的处理逻辑
    _finalUsername = value; // 确保数据有效后保存到最终变量
  },
)

记得在表单的RaisedButton或ElevatedButton的onPressed中调用_formKey.currentState.save();来触发所有onSaved回调。这里_formKey是与Form widget关联的GlobalKey<FormState>。

相关推荐
iCOD3R几秒前
Skill - kill-ai-slop 解决“AI 味”样式
前端·css·ai编程
皮音17 分钟前
Skill 在项目中的实践 —— 从 Agent 困境到 Skill 工程化
前端
大龄秃头程序员30 分钟前
RN 0.86 新架构实战:TurboModule + Fabric 组件 + iOS 原生容器,完整代码开源
前端·react native
这是个栗子32 分钟前
前端开发中的常用工具函数(八)
开发语言·前端·javascript
Hilaku43 分钟前
Vue 和 React 真正的差距,不在语法,而在团队犯错成本
前端·javascript·程序员
凤凰院凶涛QAQ1 小时前
《Java版数据结构 & 集合类剖析》栈与队列:“push/pop 是栈的灵魂,offer/poll 是队列的骨架——四组 API,两种人生”
java·开发语言·数据结构
研☆香1 小时前
为什么变量声明在赋值前也能使用?—— 深入理解 JavaScript 变量提升与作用域
开发语言·前端·javascript
右耳朵猫AI1 小时前
PHP周刊2026W28 | 安全更新、Laravel 13.18、Twig 3.28
开发语言·php·laravel
second601 小时前
第一部分:快速上手 —— 建立 C++ 基本语法与编程范式
开发语言·c++
Liora_Yvonne1 小时前
目录结构到底怎么设计?别再把 components 和 utils 当垃圾桶了
前端