reactjs - Formik 表单不呈现

Question

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

我的表格.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>)
}}