我有一个关于 Svelte 无线电组件的问题

Question

无线电组件正在制造和使用。 但是找不到input标签，因为父页面onMount运行早于组件中的逻辑。

有没有办法让父页面的onMount禁用，直到radio公共组件的逻辑结束？

// parent page
import { onMount } from 'svelte';
import Radio from '$comp/formObject/RadioCode.svelte';

onMount(()=>{
        let checked = document.getElementsByName('apple')[0].checked;  // ========> error!!!!!
        if(checked == true){
              document.getElementById('apple_txt').disabled = true;
        }
        
})

<Radio id="apple" name="apple" grpCd="fruit_CD"/>
<input id="apple_txt" name="apple_txt" type="text"/>

<!-- RadioCode.svelte -->
<script>
    export let id='';
    export let name='';
    export let grpCd='';
    export let radioList= [];
    
    async function radioData {
        const param = new FormData();
        param.append('grpCd', grpCd);
        
        const response = await Api.post('Controller Url', param);   
        radioList= response.data;
    }
</script>
{#await radioData () then radioList}
    {#each radioList as dtlCd}
            <label for={id}>
                    <input
                        id={id + dtlCd.dtlCd}
                        type="radio"
                        {name}
                        style="width: {width}"
                        value={dtlCd.dtlCd}
                        checked="checked"
                    />{dtlCd.dtlNm} 
                        </label>

    {/each}
{/await}    

我想尽可能从外部控制它......

Answer 1

使用 Svelte 时，不应该像这样直接操作 DOM。

公开一个属性并绑定，或者使用事件/回调来通知父级（并随之发送数据）。

对于单选按钮和复选框，如果所有属于一起的元素都在一个组件中创建，则可以使用

bind:group

。例如

<script>
    import Radio from './Radio.svelte';
    let selected;
</script>

<Radio name="apple" bind:selected />
<input name="apple_txt" type="text" disabled={selected == 1} />

<!-- Radio.svelte -->
<script>
    export let selected;
    export let name;

    async function radioData() {
        await new Promise(r => setTimeout(r, 1000));
        // dummy data
        const data = [
            { dtlCd: 1, dtlNm: 'Item 1' },
            { dtlCd: 2, dtlNm: 'Item 2' },
            { dtlCd: 3, dtlNm: 'Item 3' },
        ]
        // either select from data, e.g. via index, or provide with data
        selected = 1;

        return data;
    }
</script>

{#await radioData() then radioList}
    {#each radioList as dtlCd}
        <label>
            <input
                type="radio"
                {name}
                value={dtlCd.dtlCd}
                bind:group={selected} />
            {dtlCd.dtlNm}
     </label>
    {/each}
{/await}

REPL

这将始终保持状态同步，如果您只想使用回调或事件一次获取状态可能会更好。

<Radio name="apple" onload={s => selected = s} />

// add to Radio.svelte
export let onload;

async function radioData() {
    // ...

    // either select from data, e.g. via index, or provide with data
    selected = 1;
    onload?.(selected);

    return data;
}

REPL

（直接回调将是 Svelte 5 中处理事件的默认方式。）