Помогите определить тип события

Question

Есть форма:

function handleAddOp (e: React.MouseEvent<HTMLElement, MouseEvent>) {
    e.preventDefault();
    ....
}

return (
    ....
        <form onSubmit={handleAddOp}>
            <br />
            <h2><p>Добавить оператора</p></h2>
            <label>
                Название: <input value={inputOp} onChange={onChangeSearch} placeholder="Максимум 10 символов"/>
            </label><br />
        </form><br />
        <div>{message2}</div><br />
        <Button variant="primary" onClick={handleAddOp}>Добавить</Button><br/><br/>
        <Button variant="danger" onClick={() => setShowModal(!showModal)}>Закрыть</Button>
    .....
)

Когда я добавил onSubmit, тип события стал не актуален и ts пишет, что ему нужно React.FormEvent, но когда я изменяю событие, у меня отваливаются уже кнопки, которые находятся вне формы. Я конечно могу прогнуться и сунуть кнопки в форму, но я бы хотел этого избежать. Подскажите тип для моей ситуации.

Answer 1

Как узнать тип пропса 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> (используется оператор логическое И)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-6.html#intersection-types

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>
    </>)
}

БЛОГ НА HUSL

Помогите определить тип события

Ответы (1 шт):

Как узнать тип пропса React компонента?

Как использовать одну и ту же ф-ю в двух разных компонентах?

- ,-