Отправка события DOM от потомков к родительскому из функции, а не из элемента DOM (без createEventDispatcher)

Я пытаюсь понять, есть ли способ перенаправить событие DOM (форма одного) в родительский после внутреннего вызова функции.

REPL: https://svelte.dev/repl/8eb540552faa4651a398b182fa5cdd48?version=3.24.1

Как видите, я вызываю validate() в Form.svelte с помощью <form on:submit|preventDefault={validate}>.

После этого мне нужно повторно отправить событие / вызвать handleOnSubmit() в App.svelte, родителя.

Есть ли способ без использования createEventDispatcher?


javascript svelte svelte-3 svelte-component svelte-store
person Fred Hors    schedule 08.08.2020    source источник
comment
что не так с использованием createEventDispatcher?   -  person Stephane Vanraes    schedule 08.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Как насчет определения элемента <form> как экспорта, который затем можно использовать в его родительском элементе и определить onsubmit прослушиватель событий? Вы можете использовать export let form; и bind:this={form} на <form>.

В Form.svelte:

<script>
    export let form;
    
    function validate() {
        console.log("I'm the validate() function")
    }
</script>

<form bind:this={form} on:submit|preventDefault={validate}>
    <input>
    <button type="submit">
        Please save me
    </button>
</form>

В App.svelte:

<script>
    import Form from "./Form.svelte"
    import {onMount} from "svelte"
    
    let form;
    
    onMount(()=> {
        form.onsubmit = handleOnSubmit
    })
    
    function handleOnSubmit() {
        console.log("I'm the handleOnSubmit() in App.svelte")
    }
</script>

<Form bind:form={form} on:submit={handleOnSubmit}>
</Form>
person Tom Siegel    schedule 08.08.2020