React-Admin中的受控TextInput

基础概念

React-Admin 是一个用于构建管理界面的开源框架，它基于 React 和 Material-UI。受控组件（Controlled Components）是 React 中的一种概念，指的是其值由 React 状态控制的表单元素。在 React-Admin 中，TextInput 组件就是一个典型的受控组件。

优势

状态管理：受控组件使得表单数据的管理更加集中和可控，便于进行数据验证和处理。
一致性：所有表单元素的值都由 React 状态控制，确保了界面的一致性和可预测性。
灵活性：可以轻松地实现复杂的表单逻辑，如动态表单字段、条件渲染等。

类型

在 React-Admin 中，TextInput 组件主要用于输入文本数据。它支持多种输入类型，如普通文本、密码、数字等。

应用场景

TextInput 组件广泛应用于各种管理界面中，例如：

用户注册表单
数据编辑页面
搜索栏

示例代码

以下是一个简单的示例，展示如何在 React-Admin 中使用 TextInput 组件：

import * as React from 'react';
import { Edit, TextInput, required } from 'react-admin';

const MyEdit = (props) => (
    <Edit {...props}>
        <TextInput source="title" validate={required()} />
        <TextInput source="description" multiline />
    </Edit>
);

export default MyEdit;

在这个示例中，TextInput 组件用于编辑 title 和 description 字段。source 属性指定了数据源字段，validate 属性用于数据验证。

常见问题及解决方法

问题：为什么 `TextInput` 的值没有更新？

原因：可能是由于组件没有正确连接到数据源，或者状态管理有问题。

解决方法：

确保 source 属性正确指向数据源字段。
使用 useRecord 或 useResource 钩子来正确获取和更新数据。

import * as React from 'react';
import { Edit, TextInput, required, useRecord } from 'react-admin';

const MyEdit = (props) => {
    const record = useRecord();
    return (
        <Edit {...props}>
            <TextInput source="title" value={record.title} onChange={(e) => props.onSave({ title: e.target.value })} validate={required()} />
            <TextInput source="description" multiline value={record.description} onChange={(e) => props.onSave({ description: e.target.value })} />
        </Edit>
    );
};

export default MyEdit;

问题：如何实现动态表单字段？

解决方法：

可以使用 React 的条件渲染和状态管理来实现动态表单字段。

import * as React from 'react';
import { Edit, TextInput, required, useState } from 'react-admin';

const MyEdit = (props) => {
    const [showAdditionalField, setShowAdditionalField] = useState(false);

    return (
        <Edit {...props}>
            <TextInput source="title" validate={required()} />
            <TextInput source="description" multiline />
            <button onClick={() => setShowAdditionalField(!showAdditionalField)}>
                {showAdditionalField ? 'Hide' : 'Show'} Additional Field
            </button>
            {showAdditionalField && <TextInput source="additionalField" />}
        </Edit>
    );
};

export default MyEdit;

在这个示例中，通过 useState 钩子来控制 additionalField 的显示和隐藏。