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 的 useForm hook 并解构必要的属性。此步骤是可选的；或者，如果您愿意，可以使用 const form = useForm()。TypeScript 的类型推断确保了无论采用哪种方法都能获得流畅的体验。
从 useForm 派生的 Field 组件接受多个属性，例如 validators。对于此演示，我们重点关注两个主要属性：name 和 children。
- name 属性标识每个 Field，例如，在我们的示例中为 firstName。
- children 属性利用渲染属性的概念，使我们能够在不进行不必要的抽象的情况下集成组件。
TanStack 的设计在很大程度上依赖于渲染属性，从而可以在 Field 组件中访问 children。这种方法是完全类型安全的。在与 Mantine 组件（例如 TextInput）集成时，我们有选择地解构属性，如 state.value、handleChange 和 handleBlur。这种选择性方法是由于 TextInput 和我们在 children 中获得的 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