React Material-UI 自动调整大小的文本区域输入框组件

这是一个 React 组件，用于显示一个可自动调整大小的文本区域输入框。它接受一些属性作为输入，包括：label（标签文本）、type（输入类型）、variant（样式变体）、className（自定义类名）、maxAmount（最大字符数）和 innerRef（组件的引用）。

组件使用了 Material-UI 的 TextareaAutosize 组件，并根据表单的状态（errors 和 touched）来动态添加样式。如果输入框的值有错误，将会显示一个红色的边框，并在下方显示错误提示信息。如果输入框的值是一个数组（如 name 为 'newsTargetCompany'），则在保存值之前将其转换为字符串，并在显示时将其转换回数组。

该组件还使用了一个辅助函数 handleChangeStrToArr，用于将文本框的字符串值转换为数组，以便正确保存到表单状态中。

最后，组件返回一个包含 Textarea 和错误提示信息的 React 片段，以及一个 FormControl 组件，用于显示错误信息。

import React, { useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { FieldProps } from 'formik';
import Textarea from '@material-ui/core/TextareaAutosize';
import { FormControl } from '@material-ui/core';

interface Props extends FieldProps {
  label?: string
  type?: string
  variant?: any
  className?: any
  maxAmount?: number
  innerRef?: (instance: any) => void
}

const useStyles = makeStyles(theme => ({
  textarea: {
    '&:hover': {
      border: '1.2px solid black',
      transition: 'all 0.5s',
    },
    border: '1.2px solid darkgray',
    borderRadius: '3px',
  },
  textareaError: {
    borderColor: '#e53935',
    '&:hover': {
      border: '1.2px solid #e53935',
    },
  },
  helperText: {
    fontSize: '11px',
    marginTop: '4px',
    minHeight: '1em',
    textAlign: 'left',
    lineHeight: '1em',
    letterSpacing: '0.33px',
    color: '#e53935',
    whiteSpace: 'pre-wrap',
    marginLeft: '14px',
    marginRight: '14px'
  },
}));

const TextareaAutosize = ({ 
  field, 
  form, 
  label, 
  type, 
  innerRef,
  ...others 
}: Props) => {
  const classes = useStyles()
  const { errors, touched } = form
  const { name, value, onChange, onBlur } = field
  const { className } = others

  const handleChangeStrToArr = (event: any) => {
    const value = event.target.value;
    form.setFieldValue(name, value === '' ? [] : value.split('
'))
  }

  debugger
  return (
    <React.Fragment>
      <Textarea
        {...others}
        className={[
          className,
          classes.textarea,
          touched[name] && errors[name] ? classes.textareaError : '',
        ].join(' ')}
        value={value && name === 'newsTargetCompany' ? value.join('
') : value}
        name={name}
        onChange={
          name === 'newsTargetCompany' ? handleChangeStrToArr : onChange
        }
        onBlur={onBlur}
        ref={innerRef}
      />
      <div>
        <FormControl error={Boolean(touched[name] && errors[name])} style={{display:'inline-block'}}>
          {touched[name] && errors[name] ? (
            <p className={classes.helperText}>
              {name === 'newsTargetCompany'
                ? '公開対象にはフォーマットが正しくない項目が存在する'
                : errors[name]}
            </p>
          ) : null}
        </FormControl>
      </div>
    </React.Fragment>
  )

}

export default TextareaAutosize;