import React from 'react';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
const ScInput = (props) => {
const {
name,
label,
type = 'text',
/** @type FormikProps */
formik,
} = props;
const isTouched = formik.touched[name];
const error = formik.errors[name];
const value = formik.values[name];
const isError = error && isTouched;
const ariaDescribedby = `${name}-text`;
return (
<FormControl error={isError} aria-describedby={ariaDescribedby}>
<InputLabel htmlFor={name}>{label}</InputLabel>
<Input
id={name}
value={value}
type={type}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<FormHelperText id={ariaDescribedby}>{error}</FormHelperText>
</FormControl>
);
};
const getFormik = (props) => {
/**
* @typedef {Object} FormikProps
* @property {Object} values
* @property {Object} touched
* @property {Object} errors
* @property {Function} handleChange
* @property {Function} handleBlur
*/
return {
values: props.values,
touched: props.touched,
errors: props.errors,
handleChange: props.handleChange,
handleBlur: props.handleBlur,
};
};
export default {
component: ScInput,
getFormik,
};
大家好!我试图创建一个自定义组件,并在我的项目中使用它。但是JSX中的自动完成功能无效。
ScInput.d.ts应该是什么样子?使JSX中的Webshtorm能够自动完成工作。我的意思是<ScInput.component />
。还是我应该更改此ScInput.js文件?