首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux-Form多行Google Material UI TextField在显示后不自动调整大小

Redux-Form是一个用于管理表单状态的库,它结合了Redux和React,提供了一种简化和统一表单处理的方式。Google Material UI是一个React组件库,提供了一套美观且易于使用的UI组件。

在使用Redux-Form和Google Material UI的TextField时,如果希望在显示后自动调整大小,可以通过设置TextField的属性来实现。具体而言,可以使用multiline属性将TextField设置为多行文本输入框,并使用rows属性指定初始行数。此外,还可以使用rowsMax属性指定最大行数,以限制文本框的大小。

以下是一个示例代码:

代码语言:txt
复制
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from '@material-ui/core/TextField';

const MyForm = props => {
  const { handleSubmit } = props;

  const onSubmit = values => {
    // 处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field
        name="myTextField"
        component={renderTextField}
        label="My TextField"
        multiline
        rows={4}
        rowsMax={8}
      />
      <button type="submit">提交</button>
    </form>
  );
};

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
  <TextField
    label={label}
    error={touched && error}
    helperText={touched && error}
    {...input}
    {...custom}
  />
);

export default reduxForm({
  form: 'myForm'
})(MyForm);

在上述示例中,我们使用了multiline属性将TextField设置为多行文本输入框,并使用rows属性指定初始行数为4行,rowsMax属性指定最大行数为8行。通过这样的设置,当文本内容超过指定的行数时,TextField会自动调整大小以适应内容。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,可满足各种规模和类型的应用需求。详情请参考腾讯云云服务器
  • 腾讯云对象存储(COS):提供高可靠性、低成本的对象存储服务,适用于存储和处理各种类型的非结构化数据。详情请参考腾讯云对象存储

请注意,以上推荐的腾讯云产品仅作为示例,不代表其他云计算品牌商的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android MVVM框架搭建(一)ViewModel + LiveData + DataBinding

ViewModel:关联层,将Model和View进行绑定,只做和业务逻辑相关的工作,涉及任何和UI相关的操作,持有控件引用,更新UI。...View只做和UI相关的工作,涉及任何业务逻辑,涉及操作数据,处理数据。UI和数据严格的分开。...> <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent...然后我们的数据是需要显示页面上的,而之前是通过Activity获取xml中的控件,然后显示数据控件上,而现在有了DataBinding,可以直接和xml的中数据进行绑定,这看起来和JS比较像。...第二个就是响应的地方,通过这种方式去显示ViewModel中对象的变量数据控件上。这里我把这两个TextView放到输入框的上方 第三个地方,也是双向绑定的意义,就是UI改变数据源。

14.2K86

Android MVVM框架搭建(一)ViewModel + LiveData + DataBinding

ViewModel:关联层,将Model和View进行绑定,只做和业务逻辑相关的工作,涉及任何和UI相关的操作,持有控件引用,更新UI。...View只做和UI相关的工作,涉及任何业务逻辑,涉及操作数据,处理数据。UI和数据严格的分开。...> <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent...然后我们的数据是需要显示页面上的,而之前是通过Activity获取xml中的控件,然后显示数据控件上,而现在有了DataBinding,可以直接和xml的中数据进行绑定,这看起来和JS比较像。...第二个就是响应的地方,通过这种方式去显示ViewModel中对象的变量数据控件上。这里我把这两个TextView放到输入框的上方 第三个地方,也是双向绑定的意义,就是UI改变数据源。

2.2K32

compose--初入compose、资源获取、标准控件与布局

重组 1.1 安卓传统UI 先来说安卓传统UI,大致的流程就是xml中我们定义了一系列的布局(组件)和控件,由Activity的onCreate()触发xml解析,生成View树:DecorView...,实际开发中google也推荐:UI设计从MD2转变为MD3 2.BOM 对于compose的版本管理,官方推荐使用BOM,导入BOM的好处是:导入compose其他库组,都将使用BOM中定义的版本...:ui-test-manifest 1.3.0 1.3.1 androidx.compose.ui:ui-text 1.3.0 1.3.1 androidx.compose.ui:ui-text-google-fonts..."androidx.compose.ui:ui-test-manifest" } 3.kotlin-compose compiler版本对应 BOM中包含Compose编译器库,所以我们需要手动对应下...库组,我们可以使用@Preview注解可组合函数,并实现预览组件 4.2 启动 启动到模拟器的效果: 三、资源获取 xml中,我们常常会使用资源id获取到资源文件,比如:color、drawable

5.7K30

写给初学者的Jetpack Compose教程,基础控件和布局

也就是说,写在DefaultPreview函数中的UI,可以运行程序到手机上的情况下就实现快速预览。...而TextField显示的内容就是一种状态,因为随着你的输入,界面上显示的内容也需要跟着更新才行。 那么这里,当在TextField中输入内容时,首先我们并没有去做刷新页面这个操作。...其次,就算是做了刷新操作,TextField刷新发现value参数指定的内容仍然是一个空字符串,因此我们输入的内容还是无法上屏。 现在问题的原因已经解释清楚了,那么要如何解决呢?...比如,EditText有一个hint属性,用于输入框里显示一些提示性的文字,然后一旦用户输入了任何内容,这些提示性的文字就会消失。那么TextField如何实现类似的功能呢?...基本效果如下图所示: 另外你可能会觉得TextField默认的输入框背景色实在是太丑了,我们可以通过以下代码非常轻松地调整TextField的输入框背景色: @Composable fun SimpleWidgetColumn

1.5K20

Flutter TextField详解

文章目录 基本属性 TextField InputDecoration 样式 基础样式 隐藏文本 键盘类型 键盘按钮 大小写 光标 最多行数 计数器 图标 提示文字 去除下划线 边框 获取输入内容 关闭软键盘...基本属性 TextField是一个material design风格的输入框,本身有多种属性,除此之外装饰器InputDecoration也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。...this.obscureText = false,//是否隐藏文本,即显示密码类型 this.autocorrect = true,//自动更正 this.maxLines =...1,//最多行数,高度与行数同步 this.minLines,//最小行数 this.expands = false, this.maxLength,//最多输入数,有值右下角就会有一个计数器...IconButton,因为带有点击事件,我们可以点击的时候清除TextField中的内容。

4K40

PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

Material Theme UI 主题界面插件 Material Theme UI主题界面插件,旨在提供基于 Material Design设计语言的用户界面主题。...可定制化选项: 用户通常可以根据自己的喜好和需求来自定义主题的外观和配色方案,包括调整按钮样式、字体大小、高亮颜色等。...File—>Settings—>Appearance & Behavior—>Material Theme UI—>Settings—>Selected Theme中更改主题 使用Material...Theme UI更改完主题字体会和默认大小不符,需要在Editor—> Color Scheme—>Color Scheme Font中更改字体大小 Atom Material Icons美化图标插件...例如,如果用户通过菜单执行了某个操作,但是这个操作也有对应的快捷键,插件会在操作完成显示一个提示,提醒用户可以使用快捷键完成相同的操作。

1.5K30

Flutter 快速解析 TextField 的内部原理

Flutter 里 TextField 是一个比较复杂的控件,而在整个 TextField 里嵌套了许多不同实现的控件,它们组成了我们常用的输入框效果,如下图所示是关于 TextField 的主要构成部分..., TextField 里 InputDecorator 的实现是和 AnimatedBuilder 一起组成使用。...、prefixIcon、suffix 等参数,进行定位布局,计算位置方向,根据基线调整位置等等。... TextField 内部有一个 RepaintBoundary ,是因为 TextField 本身是一个需要频繁更新的控件,而 TextField 里的内容变化一般很少需要触发父布局的重绘,所以...最后介绍一个简单的问题,之前有人刚好问我:如何在 Flutter 上实现类似微信聊天输入框从一行到多行的输入框效果,如下图代码所示,就是这么简单: TextField( focusNode: _focusNode

2.2K30

《Flutter》-- 4.Flutter组件基础

Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示设备屏幕上的显示元素,而是一个描述显示元素的配置数据。...Flutter中真正代表屏幕显示元素的类是Element。 大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...Scaffold常用的属性: 1)appBar:用于设置顶部的标题栏,设置就不显示; 2)body:Widget类型,显示Scaffold内容的主要容器。...; BoxFit.none:没有填充策略,按图片原始大小显示。...如果没有提供controller,则TextField组件内部会自动创建一个。 focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互的一种常见方式。

12.4K30

使用 Flutter 制作地图应用

这是来自Material官方网站的的图片 TextField是由7个控件组成,其中有些控件默认不显示,我们可以对各个控件单独设置想要的样式来满足不同的UI展示需求。...10个字符", ),) maxLength可以设置最长字符个数,如果超过这个限制再次输入不会有显示,并且TextField在有右下角有当前字符个数的标记,此处是10/10。...,TextField被点击之后会显示为被选中状态,suffix默认不显示,只有当选中TextField的时候才会显示出来。...hintText: "我是点击的提示", hintStyle: TextStyle(color: Colors.red), ),) hintText参数可以帮助我们设置一个点击显示的文字...参数是当前已经输入的内容 onSubmitted 此方法是我们输入完成,点击键盘上回车的时候回调。

2.6K00

Unity3d开发

, 200, 20), str); //Debug.Log(str); } TextArea 用于创建多行文本编辑区,返回类型还是string 参数和参数的描述跟TextField一样 public...Hover 设置停留状态显示的颜色和背景颜色,可用于鼠标停留在那妞、输入框、选择框等上,但是没有点击时的显示 Active 设置激活状态的显示的颜色和背景颜色,用于按钮或者选择框点击显示 Focused...摄像机,UI将永远出现在所有摄像机的最前面,屏幕大小或者分辨率发生变化,画布会自动适配 参数 功能 Pixel Perfect 充值元素大小和坐标,使贴图的像素完美对应带屏幕像素上 Sort Order...排列顺序 Screen Space-Camera渲染模式 画布被放置指定摄像机前的一个给定距离上,它支持UI前面显示3D模型,等离子系统等内容,通过指定摄像机UI被呈现出来,画布会自定更改大小一适配屏幕...Sorting Layout 界面分层,越下方的层界面显示时越在前面 Order Layer 界面顺序,该值越高,姐买你显示时越在前面 World Space渲染模式 其屏幕大小将取决于拍摄的角度和相机的距离

9.1K30

Flutter | 常用组件

,如果只设置了其中的一个,则另一个则会按比例缩放,但是可通过 fit 属性来适应规则 fit:用于图片的显示空间和图片本身大小不同的时候指定图片的适应模式 image.png color 和...3,可以应用文本样式,可以像文本一样改变字体图标颜色,大小对齐等 4,可以通过 TextSpan 和文本混用 使用 Material Design 字体图标 Flutter 默认包含了一套 Material...因此,我们自定义组件是应该思考一下那种方式最为合理 输入框和表单 Material 组件库中提供了输入框组件 TextField 和表单组件 From ,下面来具体看一下 TextField 用于文本输入...大多数情况下我们都需要显示的提供一个 controller 来与文本框交互,如果没有提供,则 TextField自动创建一个 focusNode :用于控制 TextField 是否占有当前键盘输入的焦点...,当 为 true 时,每一个自 FormField 都会自动校验合法性,并直接显示错误信息。

11.3K30

Flutter 1.22 正式发布

将cupertino_icons依赖关系更新为新的1.0主要版本,CupertinoIcons的现有用法将自动映射到新样式。...通过使用MediaQuery和SafeArea API,您可以确保将活动的UI和交互式元素放置设备显示屏的无障碍区域中。另外,您将要避免瀑布边缘区域使用手势检测器,因为这可能会导致意外触摸。...对于google_maps_flutter和webview_flutter插件,选通因素一直是底层的Platform Views实现,该实现允许将Android和iOS的本机UI组件托管Flutter...预览:平滑滚动以提供匹配的输入和显示频率 当输入和显示频率不同时,Flutter团队与Google内部合作伙伴合作,极大地提高了滚动性能。...加载JSON文件,您将拥有一个界面,该界面为您提供应用大小的树状图。 ? 有关您可以使用“应用大小”工具执行的操作的更多详细信息,请阅读flutter.dev上的“使用应用大小工具”文档。

7.4K20
领券