Есть компонент формы
interface Props {
type: { [key: string]: string; };
form: { [key: string]: string; };
}
export function Form({type, form}: Props) {
const [formData, setFormData] = useState<typeof type>(form) // здесь передаем путем typeof type тип нашей formData
function handleChange(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) { ... }
return Object.keys(form).map(field => FormCreator.render(field, formData, handleChange) // здесь хочу вывести все поля
}
И есть создание полей
interface CreatorFormData {
[key: string]: string;
}
type Handler = () => void
class FormCreator {
public static name = (formData: CreatorFormData, handler: Handler) => {
return <>
<label>Enter your name</label>
<input type="text" name="name" autoComplete="off" value={formData.name || ''} onChange={handler} />
</>
}
public static password = (formData: CreatorFormData, handler: Handler) => {
return <>
<label>Enter your name</label>
<input type="text" name="password" autoComplete="off" value={formData.password || ''} onChange={handler} />
</>
}
static render = (name: string, formData: CreatorFormData, handler: Handler) => {
return this[name](formData, handler)
}
}
Ругается на
this[name]
Что
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof FormCreator'.
No index signature with a parameter of type 'string' was found on type 'typeof FormCreator'.
Как правильно затипизировать данную конструкцию?