javascript - Bir ebeveynin durumu yönettiği bir çocuk için storybook nasıl yazılır

Ben, üst bileşenin durumu yöneteceği bir çocuk öğe için Storybook yazıyorum. Örneğin, value (string) ve onChange (func) props aracılığıyla aktarılır. Her iki prop da iletiliyor, ancak storybook dosyasında durumu nasıl güncelleyeceğimden emin değilim.

textfield.tsx

import React, { FC, HTMLProps } from 'react';

type FirstNameTextFieldProps = HTMLProps<HTMLInputElement>

const FirstNameTextField: FC<FirstNameTextFieldProps> = ({
    ...restOfProps
}) => (
    <input
        type="text"
        id="fname"
        name="fname"
        {...restOfProps}
    />
);

export default FirstNameTextField;

Hikaye kitabı dosyası

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import FirstNameTextField from './test';

export default {
    title: 'FirstNameTextField',
    component: FirstNameTextField,
    description: 'A First Name TextField.',
} as Meta;

const Template: Story = (args) => <FirstNameTextField {...args} />;

export const Default = Template.bind({});
Default.args = {
    value: 'Jason',
    onChange: () => Alert('value changed'),
};

Benim gerçek bileşenim daha karmaşık, ama sorunu daha kolay göstermek istedim.