React Suite 中 Textarea 表单验证的正确使用方式

在使用 React Suite 构建表单时，开发者可能会遇到 Textarea 控件在表单验证场景下的异常行为问题。本文将深入分析问题原因并提供解决方案。

问题现象

当开发者尝试在 React Suite 的表单中使用 Textarea 控件并启用表单验证功能时，可能会遇到以下异常行为：

1. 输入框失去焦点：每次输入一个字符后，输入框就会失去焦点
2. 输入体验差：用户无法连续输入多个字符
3. 仅第一个字符被保留：后续输入的字符可能不会被正确显示或保存

问题根源

这个问题的根本原因在于 React 组件的重新渲染机制。当我们在组件内部使用 React.forwardRef 创建子组件时，每次父组件重新渲染都会创建一个全新的子组件实例。

具体来说，问题代码中存在以下关键错误：

const App = () => {
  // 错误：在组件内部声明forwardRef组件
  const TextArea = React.forwardRef((props, ref) => (
    <Input {...props} as="textarea" ref={ref} />
  ));
  
  // ...其他代码
}

这种写法导致每次 App 组件渲染时都会创建一个新的 TextArea 组件，破坏了 React 的组件生命周期和状态保持机制。

正确解决方案

要解决这个问题，我们需要将 TextArea 组件的声明移到组件外部：

// 正确：在组件外部声明forwardRef组件
const TextArea = React.forwardRef((props, ref) => (
  <Input {...props} as="textarea" ref={ref} />
));

const App = () => {
  // ...其他代码
}

这种写法确保了 TextArea 组件在整个应用生命周期中保持稳定，不会因为父组件的重新渲染而被重新创建。

最佳实践建议

1. 组件声明位置：所有使用 React.forwardRef 创建的组件都应该在模块级别声明，而不是在渲染函数内部。

2. 表单验证集成：当使用 React Suite 的表单验证功能时，确保所有自定义表单控件都正确处理 ref 传递。

3. 性能优化：对于复杂的表单控件，考虑使用 React.memo 进行记忆化处理以避免不必要的重新渲染。

4. 代码组织：将自定义表单控件单独放在一个文件中，便于维护和复用。

完整示例代码

import React, { useState } from "react";
import { Input, Form, Schema } from "rsuite";

// 正确声明TextArea组件
const TextArea = React.forwardRef((props, ref) => (
  <Input {...props} as="textarea" ref={ref} />
));

// 表单验证模型
const model = Schema.Model({
  desc: Schema.Types.StringType().isRequired("必填字段"),
});

const MyForm = () => {
  const [formValue, setFormValue] = useState({ desc: "" });

  return (
    <Form model={model} formValue={formValue} onChange={setFormValue}>
      <Form.Control
        name="desc"
        placeholder="请输入描述"
        accepter={TextArea}
        rows={5}
      />
    </Form>
  );
};

通过遵循这些最佳实践，开发者可以避免 Textarea 在表单验证场景下的异常行为，同时提高代码的可维护性和性能。