首页
学习
活动
专区
工具
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):提供高可靠性、低成本的对象存储服务,适用于存储和处理各种类型的非结构化数据。详情请参考腾讯云对象存储

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

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

相关·内容

领券