在这里,我try 创建一个定制组件,它可以通过props 接收数据,并充当基本的表单输入.
但是,我遇到了一个没有显示错误的问题.有人能解释一下我在实现过程中可能犯了什么错误吗?
如果有人知道这一点,我将非常感谢您在解决这个问题上的帮助.
trying to build an reuseable component but now working why??
/* eslint-disable react/prop-types */
const Input = (props) => {
const {formik, icon, title,type,otherState,btn1,btn2, name} = props
Input.defaultProps = {
type: "text",
otherState: null,
btn1: null,
btn2: null,
name: title.toLowerCase()
}
if (otherState) {
var {state, setState} = otherState
}
if (btn1) {
var {icon1, text1, action1} = btn1
}
if (btn2) {
var {icon2, text2, action2} = btn2
}
return (
<div className="mb-2">
<span className="flex">
<img className="w-6 h-6 mr-2" src={icon} alt={title} />
<label
htmlFor={name}
className="block text-sm font-semibold text-textPrimary dark:text-dark_textPrimary"
>
{title}
</label>
</span>
<span className="flex w-full">
{console.log(formik.touched.name)}
<input
type={type}
name={name}
value={formik.values.name}
title={`${formik.touched.name && formik.values.name == "" ? `${title} is required` : ""}`}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
placeholder={
formik.touched.name && formik.errors.name
? `${title} is required`
: `${title}`
}
className={`block w-full px-4 py-2 mt-2 text-textPrimary dark:text-dark_textPrimary bg-background dark:bg-dark_background border-2 rounded-md focus:ring-secondary ${
formik.touched.name && formik.errors.name
? " border-error_red placeholder-error_red"
: "border-cardBorder dark:border-dark_cardBorder"
}`}
/>
{
btn1 || btn2 ? (
<img
className="w-6 h-7 cursor-pointer mt-3 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
onClick={() => action1()}
src={state ? icon1 : icon2}
title={!state ? text1 : text2}
/>) : null
}
</span>
{
formik.touched.name && formik.errors.name && formik.values.name != "" ? (
<h3 className="text-xs text-error_red">{formik.errors.name}</h3>
) : null
}
</div>
)
}
export default Input
这是一个输入组件, 第一个组件用于邮箱,第二个组件用于密码
<Input
formik={formik}
icon={emailIcon}
title="Email"
name="email"
type="email"
/>
<Input
formik={formik}
icon={passwordIcon}
name="password"
title="Password"
type={showPassword ? "password" : "text"}
otherState={{'state':showPassword, 'setState':setShowPassword}}
btn1={{'icon1':eyeOpenIcon, 'text1':"Hide Password", 'action1':() => setShowPassword(!showPassword)}}
btn2={{'icon2':eyeCloseIcon, 'text2':"Show Password", 'action2':() => setShowPassword(!showPassword)}}
/>