反应怎么使用Textfield Material-UI中的图标和TypeScript

本教程将介绍反应如何使用Textfield Material-UI中的图标和TypeScript的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

反应怎么使用Textfield Material-UI中的图标和TypeScript 教程 第1张

问题描述

我已经使用TypeScript Material UI和Formik设计了一个带有验证功能的表单。我希望在我的文本字段区域中出现一个材料UI图标,下面是我的代码:


import React from 'react'
import { Formik, Form, FieldAttributes,useField} from 'formik'
import { TextField } from '@material-ui/core'
import CalendarTodayIcon from '@material-ui/icons/CalendarToday'
import * as yup from 'yup'
import './MainInfo.css'

const MyTextField: React.FC<FieldAttributes<{}>> = ({
  placeholder,type,className,style,
  ...props
}) => {
  const [field, meta] = useField<{}>(props);
  const errorText = meta.error && meta.touched ? meta.error : "";
  return (
 <div className='container'>
 <TextField
 placeholder={placeholder}
 className={className}
 style={style}
 type={type}
 {...field}
 helperText={errorText}
 error={!!errorText}
 id="outlined-basic" 
 variant="outlined"
  />
 </div>
  );
};

export function MainInfo() {

 return (
<div>
  <Formik
 validateOnChange={true} validationSchema={validationSchema} initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }} onSubmit={(data) => {
console.log(data)
 }}
  >
 {({values, errors}) => (
<Form id='my-form' >
  <div>
 <label className='label'>عنوان</label>
 <div >
<MyTextField style={{width:'60%'}}  placeholder='طراح' name='Title' type='input' />
 </div>
...
  </div>
</Form>
 )}
  </Formik>
</div>
 )
}

但问题是我无法添加新的Icon属性或InputProp,因为<FieldAttributes<{}>>不接受它。怎么定义FieldAttributes的新属性或修复此问题?

推荐答案

使用文本字段属性InputProps自定义输入字段

并使用startAdornmentendAdornment自定义前缀/后缀

最后在InputAdornment内使用图标可以

import { TextField, InputAdornment } from "@material-ui/core";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";

<TextField
  id="standard-basic"
  label="Standard"
  InputProps={{
 startAdornment: (
<InputAdornment position="start">
  <ExpandLess />
</InputAdornment>
 ),
 endAdornment: (
<InputAdornment position="end">
  <ExpandMore />
</InputAdornment>
 )
  }}
/>


参考:

    MUITextField Props API:inputProps,startAdornment,endAdornment

    MUIInputInputAdornment Props API

    在线演示:https://stackblitz.com/edit/gzlbzm

好了关于反应怎么使用Textfield Material-UI中的图标和TypeScript的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。