setState() 清除表单元素数据flutter中的数据

Posted

技术标签:

【中文标题】setState() 清除表单元素数据flutter中的数据【英文标题】:setState() clears the data in form element data flutter 【发布时间】:2019-02-07 02:00:40 【问题描述】:

我是 Flutter 的新手,正在尝试使用 Sateful 小部件。事情是这样的,在我的 UI 屏幕布局中,我有两个不同的小部件

    DropdownButton 小部件 TextFormField 包含卡号。

当我尝试将下拉选择的值更新到 DropdownButton 小部件时,它会自动清除 TextFormField 中的文本。每次调用 setState() 方法更新值时,是否需要将文本存储在全局变量中才能再次恢复?

这是小部件的代码, 下拉按钮

 new Padding(
              padding: const EdgeInsets.all(15.0),
              child: new Column(
                children: <Widget>[
                  DropdownButton<String>(
                    value: _referPractice,
                    isDense: true,
                    hint: new Text(CONST_SELECT),
                    items: _stdCodesList.map((value) 
                      return new DropdownMenuItem<String>(
                        value: value.dialCode,
                        child: new Text("$value.code $value.dialCode"),
                      );
                    ).toList(),
                    onChanged: (String newValue) 
                      setState(() 
                        _referPractice = newValue;  // here I`m trying to update selected value. 
                      );
                    ,
                  )
                ],
              )),

TextFormField

TextFormField(
                controller: _textController,
                keyboardType: TextInputType.number,
                style: new TextStyle(
                  fontWeight: FontWeight.w200,
                  color: Colors.black,
                  fontSize: 18.0,
                ),
                decoration: new InputDecoration(
                    hintText: HING_ENTER_NUMBER,
                    suffixIcon: CircleIconButton(
                      onPressed: () 
                        this.setState(() 
                          _textController.clear();
                        );
                      ,
                    )),
                maxLines: 1,
                validator: (value) 
                  if (value.isEmpty) 
                    return ERROR_CARD_DETAILS;
                  
                ,
              ),

我知道有状态小部件每次调用 setState 时都会重建小部件,但是我如何持久化尚未存储在任何地方的表单数据的数据。

请给点建议!提前致谢。

【问题讨论】:

你能把你的完整代码吗?你在哪里初始化 _textController ? 【参考方案1】:

对于给定的代码,我能想到的一个错误是每次都创建TextEditingController

@override
Widget build(BuildContext context) 
  var _textController = TextEditingController(); //problem
  // build and return widgets

它应该在build 方法的外部。我们可以在constructorinitState 中找到它。

如果你在build之外有_textController,你能再添加一些代码吗?

【讨论】:

这是每次输入触发构建功能的最佳方法吗? 如果你想将文本分配给 _textController 然后在 initState 中执行

以上是关于setState() 清除表单元素数据flutter中的数据的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中提交表单后无法清除输入字段

无法使用 setstate 清除受控输入

如何使用 jQuery 复制和清除表单元素?

如何在 React 中使用 setState() 来空白/清除数组的值

React中的表单元素

react 表单处理