使用 Prisma2 在 blitz/next.js 中提交单选和下拉输入

如何解决使用 Prisma2 在 blitz/next.js 中提交单选和下拉输入

所以我正在创建一个测验应用程序。到目前为止，我可以创建一个带有可能答案的问题并提交给我的 pgdb。我不知道如何处理复选框和下拉选择：

现在是：

问题标题：|________________________|

答案 1：|________________________|

答案 2：|________________________|

答案 3：|________________________|

答案 4：|________________________|

这就是我想要的：

• 问题必须有一个类别。
• 必须将其中一个答案标记为正确。

问题标题：|________________________|分类：|---选择----|

答案 1：|________________________| ( ) 正确答案

答案 2：|________________________| ( ) 正确答案

答案 3：|________________________| ( ) 正确答案

答案 4：|________________________| ( ) 正确答案

我使用的是带有prisma2 和pgsql 的bitz.js。

这是我的 createQuestion：

import { resolver } from "blitz"
import db from "db"
import * as z from "zod"

const CreateQuestion = z
  .object({
    title: z.string(),category: z.array(z.object({ name: z.string() })),answers: z.array(z.object({ text: z.string() })),})
  .nonstrict()

export default resolver.pipe(resolver.zod(CreateQuestion),resolver.authorize(),async (input) => {
  const question = await db.question.create({
    data: {
     ...input,answers: { create: input.answers },category: { create: input.categories },},})

  return question
})

这是新的问题页面：

import { Link,useRouter,useMutation,BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
import createQuestion from "app/questions/mutations/createQuestion"
import { QuestionForm,FORM_ERROR } from "app/questions/components/QuestionForm"


const NewQuestionPage: BlitzPage = () => {
  const router = useRouter()
  const [createQuestionMutation] = useMutation(createQuestion)

  return (
    <div>
      <h1>Create New Question</h1>

      <QuestionForm
        submitText="Create Question"
        initialValues={{ answers: [],categories: [] }}
        onSubmit={async (values) => {
          try {
            const question = await createQuestionMutation(values)
            router.push(`/questions/${question.id}`)
          } catch (error) {
            console.error(error)
            return {
              [FORM_ERROR]: error.toString(),}
          }
        }}
      />

      <p>
        <Link href="/questions">
          <a>Questions</a>
        </Link>
      </p>
    </div>
  )
}

NewQuestionPage.authenticate = true
NewQuestionPage.getLayout = (page) => <Layout title={"Create New Question"}>{page}</Layout>

export default NewQuestionPage

最后是问题表：

import { Form,FormProps } from "app/core/components/Form"
import { LabeledTextField } from "app/core/components/LabeledTextField"
import * as z from "zod"
export { FORM_ERROR } from "app/core/components/Form"

export function QuestionForm<S extends z.ZodType<any,any>>(props: FormProps<S>) {
  return (
    <Form<S> {...props}>
      <div className="flex">
      <LabeledTextField name="title" label="Titulo" placeholder=" " />

      </div>
      <LabeledTextField name="answers.0.text" label="Choice 1" />
      <LabeledTextField name="answers.1.text" label="Choice 2" />
      <LabeledTextField name="answers.2.text" label="Choice 3" />
      <LabeledTextField name="answers.3.text" label="Choice 4" />
      <LabeledTextField name="answers.4.text" label="Choice 5" />
      <input type="checkBox" name="vehicle1" value="Bike"></input>
      <div></div>
    </Form>
  )
}

我对此很陌生，有人可以帮我添加这两个额外的字段吗？