UI 库

将 TanStack Form 与 UI 库结合使用

TanStack Form 是一个无头库，为您提供了完全的灵活性，可以按您认为合适的方式进行样式设计。它与各种 UI 库兼容，包括 Tailwind、Material UI、Mantine，甚至是纯 CSS。

本指南重点介绍 Material UI 和 Mantine，但这些概念适用于您选择的任何 UI 库。

先决条件

在将 TanStack Form 与 UI 库集成之前，请确保已在项目中安装了必要的依赖项

对于 Material UI，请遵循其官方网站上的安装说明。
对于 Mantine，请参考其文档。

注意：虽然您可以混合搭配库，但通常建议坚持使用一个库，以保持一致性并最大程度地减少膨胀。

Mantine 示例

以下是演示将 TanStack Form 与 Mantine 组件集成的示例

tsx

import { TextInput, Checkbox } from '@mantine/core'
import { useForm } from '@tanstack/react-form'

export default function App() {
  const { Field, handleSubmit, state } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      isChecked: false,
    },
    onSubmit: async ({ value }) => {
      // Handle form submission
      console.log(value)
    },
  })

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          handleSubmit()
        }}
      >
        <Field
          name="firstName"
          children={({ state, handleChange, handleBlur }) => (
            <TextInput
              defaultValue={state.value}
              onChange={(e) => handleChange(e.target.value)}
              onBlur={handleBlur}
              placeholder="Enter your name"
            />
          )}
        />
        <Field
          name="isChecked"
          children={({ state, handleChange, handleBlur }) => (
            <Checkbox
              onChange={(e) => handleChange(e.target.checked)}
              onBlur={handleBlur}
              checked={state.value}
            />
          )}
        />
      </form>
      <div>
        <pre>{JSON.stringify(state.values, null, 2)}</pre>
      </div>
    </>
  )
}

import { TextInput, Checkbox } from '@mantine/core'
import { useForm } from '@tanstack/react-form'

export default function App() {
  const { Field, handleSubmit, state } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      isChecked: false,
    },
    onSubmit: async ({ value }) => {
      // Handle form submission
      console.log(value)
    },
  })

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          handleSubmit()
        }}
      >
        <Field
          name="firstName"
          children={({ state, handleChange, handleBlur }) => (
            <TextInput
              defaultValue={state.value}
              onChange={(e) => handleChange(e.target.value)}
              onBlur={handleBlur}
              placeholder="Enter your name"
            />
          )}
        />
        <Field
          name="isChecked"
          children={({ state, handleChange, handleBlur }) => (
            <Checkbox
              onChange={(e) => handleChange(e.target.checked)}
              onBlur={handleBlur}
              checked={state.value}
            />
          )}
        />
      </form>
      <div>
        <pre>{JSON.stringify(state.values, null, 2)}</pre>
      </div>
    </>
  )
}

首先，我们从 TanStack 解构了必要的属性。此步骤是可选的；或者，如果您愿意，也可以使用 const form = useForm()。TypeScript 的类型推断确保了无论采用哪种方法都能获得流畅的体验。
从 useForm 派生的 Field 组件接受多个属性，例如 validators。在本演示中，我们关注两个主要属性：name 和 children。
- name 属性标识每个 Field，例如，在我们示例中的 firstName。
- children 属性利用了渲染属性的概念，使我们能够集成组件，而无需不必要的抽象。
TanStack 的设计严重依赖于渲染属性，它允许在 Field 组件中访问 children。这种方法是完全类型安全的。当与 Mantine 组件（如 TextInput）集成时，我们会选择性地解构诸如 state.value、handleChange 和 handleBlur 等属性。之所以采取这种选择性方法，是因为 TextInput 与子项中获取的 field 之间的类型存在细微差别。
通过遵循这些步骤，您可以将 Mantine 组件无缝集成到 TanStack Form 中。
这种方法同样适用于其他组件，例如 Checkbox，从而确保在不同 UI 元素之间实现一致的集成。

使用 Material UI

使用 Material UI 组件的集成过程相似。以下是使用 Material UI 的 TextField 和 Checkbox 的示例

tsx

        <Field
            name="lastName"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <TextField
                  id="filled-basic"
                  label="Filled"
                  variant="filled"
                  defaultValue={state.value}
                  onChange={(e) => handleChange(e.target.value)}
                  onBlur={handleBlur}
                  placeholder="Enter your last name"
                />
              );
            }}
          />

           <Field
            name="isMuiCheckBox"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <MuiCheckbox
                  onChange={(e) => handleChange(e.target.checked)}
                  onBlur={handleBlur}
                  checked={state.value}
                />
              );
            }}
          />

        <Field
            name="lastName"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <TextField
                  id="filled-basic"
                  label="Filled"
                  variant="filled"
                  defaultValue={state.value}
                  onChange={(e) => handleChange(e.target.value)}
                  onBlur={handleBlur}
                  placeholder="Enter your last name"
                />
              );
            }}
          />

           <Field
            name="isMuiCheckBox"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <MuiCheckbox
                  onChange={(e) => handleChange(e.target.checked)}
                  onBlur={handleBlur}
                  checked={state.value}
                />
              );
            }}
          />

集成方法与 Mantine 相同。
主要区别在于 Material UI 组件的特定属性和样式选项。

将 TanStack Form 与 UI 库结合使用

先决条件

Mantine 示例

使用 Material UI

订阅 Bytes

订阅 Bytes