Как узнать тип пропса React компонента?
- Например при написании
<button onClick />
посмотреть в сплывающей подсказке (ctrl+space если сама не появилась), далее стрелочка рядом с именем, если по ней кликнуть - появится окошка с описанием

- В вашем случае, можно сделать так: написать
onSubmit={event => null}
а затем навести мышку на event
// ----------------------------------------------------------------------
//
{//TEST
// (parameter) event: React.FormEvent<HTMLFormElement>
const form = (<form onSubmit={event => null}></form>);
// (parameter) event: React.MouseEvent<HTMLButtonElement, MouseEvent>
const button = (<button onClick={event => null} />)
// (parameter) event: React.ChangeEvent<HTMLInputElement>
const inp = (<input onChange={event => null} />)
}
//
// ----------------------------------------------------------------------
Как использовать одну и ту же ф-ю в двух разных компонентах?
В вашем случае, в функции handleAddOp
событие может быть React.FormEvent<HTMLFormElement>
или React.MouseEvent<HTMLButtonElement, MouseEvent>
.
В TypeScript это будет выглядеть так React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
(используется оператор логическое И)
function handleAddOp(e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) {
e.preventDefault();
// ....
}
- ,-
песочница там
import React from 'react'
// FIXME: что это за компонент, что он ждёт в `onClick`
declare var Button: React.FC<any>;
function handleAddOp(e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) {
e.preventDefault();
// ....
}
interface QCoProps {
message2: any;
showModal: boolean;
setShowModal: (showModal: boolean) => any;
inputOp: string;
onChangeSearch: (event: React.ChangeEvent<HTMLInputElement>) => any;
}
const QCo: React.FC<QCoProps> = ({ message2, showModal, setShowModal, inputOp, onChangeSearch }) => {
return (<>
<form onSubmit={handleAddOp}>
<h2>Добавить оператора</h2>
<label>Название: <input value={inputOp} onChange={onChangeSearch} placeholder="Максимум 10 символов" /></label>
</form>
<div>{message2}</div>
<Button variant="primary" onClick={handleAddOp}>Добавить</Button><br /><br />
<Button variant="danger" onClick={() => setShowModal(!showModal)}>Закрыть</Button>
</>)
}