0

Есть форма:

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, но когда я изменяю событие, у меня отваливаются уже кнопки, которые находятся вне формы. Я конечно могу прогнуться и сунуть кнопки в форму, но я бы хотел этого избежать. Подскажите тип для моей ситуации.

1 ответ 1

1

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

  1. Например при написании <button onClick /> посмотреть в сплывающей подсказке (ctrl+space если сама не появилась), далее стрелочка рядом с именем, если по ней кликнуть - появится окошка с описанием введите сюда описание изображения
  2. В вашем случае, можно сделать так: написать 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>
    </>)
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.