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，而 MyForm 目前是我从 App.tsx 返回的全部内容。

没有错误。没什么...

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