只是为了学习目的而设置了一个基本的傻瓜形式......似乎无法呈现。没有错误。功能组件运行。没什么可看的...
我的表格.tsx
export const MyForm: React.FC = () => {
console.log("MyForm has been called")
return (
<div>
<Formik initialValues={{ firstName: "roberto" }} onSubmit={data => { console.log(data) }}>
{({ values, handleChange, handleSubmit, handleBlur }) => {
<form onSubmit={handleSubmit}>
<TextField value={values.firstName} onChange={handleChange} onBlur={handleBlur} name="firstName" />
<pre>JSON.stringify(values)</pre>
</form>
}}
</Formik>
</div >
)
}
我已将 MyForm 正确导入 App.tsx,目前我从 App.tsx 返回的全部是 MyForm。
没有错误。没什么...
最佳答案
我不认为您返回您的表单,这就是它不呈现的原因:
export const MyForm: React.FC = () => {
console.log("MyForm has been called")
return (
<div>
<Formik initialValues={{ firstName: "roberto" }} onSubmit={data => { console.log(data) }}>
{({ values, handleChange, handleSubmit, handleBlur }) => (
<form onSubmit={handleSubmit}>
<TextField value={values.firstName} onChange={handleChange} onBlur={handleBlur} name="firstName" />
<pre>JSON.stringify(values)</pre>
</form>
)}
</Formik>
</div >
)
}
请注意,我将函数的大括号更改为围绕您的 <form>
的括号.或者,您可以保留大括号,而改为
{({ values, handleChange, handleSubmit, handleBlur }) => {
return (<form>...</form>)
}}
关于reactjs - Formik 表单不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68823582/