Formik 表单不呈现

Question

只是为了学习目的而设置了一个基本的傻瓜形式......似乎无法呈现。没有错误。功能组件运行。没什么可看的...

MyForm.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。

没有错误。没什么...

Answer 1

我不认为你返回你的表单，这就是它没有呈现的原因：

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>)
}}

Formik 表单不呈现

Formik form not rendering

reactjs

tsx

formik