Struct Generate ReactHookForm

pub struct PermissionAddRequest { pub name: String, pub description: Option<String>, pub create_time: Option<String>, pub permission_url: Option<String> }

import React, { JSX } from 'react'; import { Controller, useForm, } from 'react-hook-form'; interface PermissionAddRequest { name: string, description: string | undefined, create_time: string | undefined, permission_url: string | undefined, } const MyDialog: React.FC<Prop> = (props) => { const { register, handleSubmit, reset, control} = useForm<PermissionAddRequest>(); //todo! const onFinish = async (values: PermissionAddRequest) => { }; return ( <Dialog id={'my-dialog'} onClose={() => reset()}> <DialogBody> <DialogTitle title={'表单'} /> <form onSubmit={handleSubmit(onFinish)}> <Controller render={function({ field, fieldState: { error } }) { return <InputWrapper label={'名称'} bottomLeftLabel={error?.message}> <input type={'text'} {...field} {...register("name")} className={get_input_class(error?.message)} placeholder={'name'} /> </InputWrapper>; }} name={'name'} control={control} rules={{ required: '请输入名称' }} /> <Controller render={function({ field, fieldState: { error } }) { return <InputWrapper label={'介绍'} bottomLeftLabel={error?.message}> <input type={'text'} {...field} {...register("description")} className={get_input_class(error?.message)} placeholder={'description'} /> </InputWrapper>; }} name={'name'} control={control} /> <Controller render={function({ field, fieldState: { error } }) { return <InputWrapper label={'创建时间'} bottomLeftLabel={error?.message}> <input type={'text'} {...field} {...register("create_time")} className={get_input_class(error?.message)} placeholder={'create_time'} /> </InputWrapper>; }} name={'name'} control={control} /> <Controller render={function({ field, fieldState: { error } }) { return <InputWrapper label={'访问URL'} bottomLeftLabel={error?.message}> <input type={'text'} {...field} {...register("permission_url")} className={get_input_class(error?.message)} placeholder={'permission_url'} /> </InputWrapper>; }} name={'name'} control={control} /> </form> </DialogBody> <DialogCloseBtn /> </Dialog> ); }; export { MyDialog };