RedwoodJS 表单开发实战教程：构建优雅的 Contact Us 表单-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01046/article/details/148375306

RedwoodJS 表单开发实战教程：构建优雅的 Contact Us 表单

redwood The App Framework for Startups 项目地址: https://gitcode.com/gh_mirrors/re/redwood

前言

在 Web 开发中，表单处理一直是个令人头疼的问题。React 生态中虽然有各种解决方案，但往往需要大量样板代码。RedwoodJS 提供了一套优雅的表单处理方案，让开发者能够专注于业务逻辑而非表单细节。本文将带你构建一个完整的 Contact Us 表单，体验 RedwoodJS 表单助手的强大功能。

创建基础页面

首先，我们需要创建一个 Contact 页面：

yarn rw g page contact

然后在布局文件中添加导航链接：

// web/src/layouts/BlogLayout/BlogLayout.jsx
import { Link, routes } from '@redwoodjs/router'

const BlogLayout = ({ children }) => {
  return (
    <>
      <header>
        <nav>
          <ul>
            {/* 其他导航项 */}
            <li>
              <Link to={routes.contact()}>Contact</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>{children}</main>
    </>
  )
}

引入 RedwoodJS 表单组件

RedwoodJS 的表单系统基于 React Hook Form 构建，提供了开箱即用的表单处理能力。让我们从最基本的表单开始：

// web/src/pages/ContactPage/ContactPage.jsx
import { Form, TextField, Submit } from '@redwoodjs/forms'

const ContactPage = () => {
  return (
    <Form>
      <TextField name="input" />
      <Submit>Save</Submit>
    </Form>
  )
}

这个简单的表单已经包含了完整的提交功能，但还缺少数据处理逻辑。

表单提交处理

为表单添加提交处理函数：

const ContactPage = () => {
  const onSubmit = (data) => {
    console.log('表单数据:', data)
    // 这里可以添加API调用等处理逻辑
  }

  return (
    <Form onSubmit={onSubmit}>
      <TextField name="input" />
      <Submit>Save</Submit>
    </Form>
  )
}

当用户提交表单时，onSubmit 函数会被调用，并接收包含所有表单数据的对象。

构建完整联系表单

让我们扩展表单，包含完整的联系信息字段：

import { TextAreaField } from '@redwoodjs/forms'

const ContactPage = () => {
  const onSubmit = (data) => {
    console.log('联系信息:', data)
  }

  return (
    <Form onSubmit={onSubmit}>
      <label htmlFor="name">姓名</label>
      <TextField name="name" />
      
      <label htmlFor="email">邮箱</label>
      <TextField name="email" />
      
      <label htmlFor="message">留言内容</label>
      <TextAreaField name="message" />
      
      <Submit>提交</Submit>
    </Form>
  )
}

表单验证

RedwoodJS 内置了强大的验证功能。我们可以轻松添加必填验证：

<TextField name="name" required />
<TextField name="email" required validation={{ pattern: /^\S+@\S+$/i }} />
<TextAreaField name="message" required />

对于更复杂的验证规则，可以使用 validation 属性：

<TextField 
  name="email"
  validation={{
    required: true,
    pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: '请输入有效的邮箱地址'
    }
  }}
/>

错误处理

RedwoodJS 自动处理验证错误并显示给用户。要自定义错误显示，可以使用 FieldError 组件：

import { FieldError } from '@redwoodjs/forms'

<TextField name="email" validation={{ required: true }} />
<FieldError name="email" className="error-message" />

表单样式优化

虽然功能已经完善，但我们可以添加一些基础样式提升用户体验：

/* 在页面组件中添加样式 */
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

label {
  display: block;
  margin-top: 1rem;
}

input, textarea {
  width: 100%;
  padding: 8px;
  margin-top: 0.5rem;
}

.error-message {
  color: red;
  font-size: 0.8rem;
}

表单提交状态

处理表单提交状态可以提升用户体验：

const ContactPage = () => {
  const [isSubmitting, setIsSubmitting] = useState(false)
  
  const onSubmit = async (data) => {
    setIsSubmitting(true)
    try {
      await sendContactForm(data)
      toast.success('提交成功！')
    } catch (error) {
      toast.error('提交失败，请重试')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Form onSubmit={onSubmit}>
      {/* 表单字段 */}
      <Submit disabled={isSubmitting}>
        {isSubmitting ? '提交中...' : '提交'}
      </Submit>
    </Form>
  )
}