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;

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;

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;