modal-dialog 相关问题

我有以下路线： - 路线 - 艺术家 - [子弹] - 新的 - +page.server.js - +page.svelte 其中 new/+page.svelte 如下：导入</desc> <question vote="0"> <p>我有以下路线：</p> <pre><code>- routes - artists - [slug] - new - +page.server.js - +page.svelte </code></pre> <p>其中 <pre><code>new/+page.svelte</code></pre> 如下：</p> <pre><code><script> import ArtistForm from "../../../components/forms/ArtistForm.svelte"; /* data returned from actions function in +page.server.js */ export let form; </script> <ArtistForm formData={form} mode="new" /> </code></pre> <p>和<pre><code>+page.svelte</code></pre>仅具有提交表单时必须执行的操作：</p> <pre><code>export const actions = { default: async ({ request, fetch }) => { const artistAPI = new ArtistAPI(fetch); const data = Object.fromEntries(await request.formData()); const artist = artistDTO(data); // if errors returned from building the DTO (validation errors) then return the object. if (artist?.errors && !emptyObject(artist.errors)) { return { "data": artist.data, "errors": artist.errors, }; } const response = await artistAPI.post(artist); if (response.status == 200) { throw redirect(302, '/artists') } return { "data": artist.data, "errors": response.errors, } } }; </code></pre> <p>现在，这本身就可以很好地工作。每当我访问<pre><code>artists/new</code></pre>时，我都可以创建新的艺术家。</p> <p>问题如下：</p> <p>我有一条<pre><code>routes/records/new</code></pre>路线。创建记录时，如果艺术家不存在，我希望允许用户通过模式动态创建艺术家。为此，我加载一个模态，并在模态中加载 <pre><code><ArtistForm></code></pre> 组件。该组件有一个 <pre><code><form></code></pre> 元素和一个用于提交表单的按钮。</p> <p>这是 <pre><code>routes/records/new</code></pre> 中加载组件的代码片段：</p> <pre><code>{:else if activeStep == "CreateArtist"} <div>Artist does not exist, please add it.</div> <ArtistForm loadedAsModal={ true } /> <div class="mt-7 flex justify-center"> <button class="btn btn-outline btn-primary" type="submit" on:click={handleSubmit}>Create Artist</button> </div> {/if} </code></pre> <p>问题是当我单击“保存”按钮时。当模式中的表单提交时，将调用 <pre><code>routes/records/new/+page.server.js</code></pre> 中定义的操作。艺术家的 <pre><code>action</code></pre> 未触发，我认为这是正确的，因为我正在 <pre><code>routes/records/new</code></pre> 中加载组件，但操作位于 <pre><code>routes/artists/new/+page.server.js</code></pre> 中。</p> <p>我想也许添加一个作为 prop 传递给 <pre><code><ArtistForm></code></pre> 的回调方法，但随后我必须复制逻辑，以便回调可以从表单获取数据并执行 POST 请求。</p> <p>有没有什么方法可以解决这个问题而无需（或最少）代码重复？</p> </question> <answer tick="false" vote="0"> <p>正如 @PeppeL-G 所提到的，我们可以通过将操作属性设置为 <pre><code>/artists/new/</code></pre> 来使其工作。这样，当提交表单时，它将从加载表单的任何位置触发<pre><code>/artists/new/+page.server.js</code></pre>中定义的操作，在我的例子中，从在不同路径中加载的模式。</p> <p>现在，我面临的另一个问题是：当表单加载到模态中并成功提交后，我需要在加载模态的路由中返回数据。为了实现这一点，我向 <pre><code>callback</code></pre> 添加了 <pre><code>ArtistForm</code></pre> 属性。这个回调函数将从组件加载的路径传递，在这种情况下我称之为<pre><code>processData</code></pre>：</p> <pre><code>{:else if activeStep == "CreateArtist"} <div>Artist does not exist, please add it.</div> <ArtistForm loadedAsModal={ true } callback={processData}/> {/if} </code></pre> <p>在 <pre><code>ArtistForm</code></pre> 中，我使用 <pre><code>use:enhance</code></pre> 接收带有 <pre><code>result</code></pre> 参数的函数，该参数保存表单的 <pre><code>data</code></pre> 值，意味着提交表单时从 <pre><code>action</code></pre> 返回的数据。有了这些数据，我可以简单地将其传递给回调函数，并在实例化组件的路径中执行我想要的任何操作：</p> <pre><code><form method="POST" class="pt-10" action="/artists/new" use:enhance={() => { return async ({ result }) => { if (!loadedAsModal && (result.status >= 200 && result.status < 300) && !('errors' in result.data)) { await goto("/artists"); return; } if (('errors' in result.data)) { return; } callbackFn(result); } }}> ... </form> </code></pre> </answer> </body></html>

forms modal-dialog svelte sveltekit svelte-3

回答 0 投票 0

如何选择在 DOM 之后渲染的 HTML 元素

我想选择OKBTN 让 main = document.querySelector("#main"); 让 okBtn = document.querySelector("#ok"); 函数 myAlert(标题,消息,图标){ 让卡=“”； ...

javascript dom modal-dialog jquery-selectors addeventlistener

回答 1 投票 0

触发特定模态内容

我有切换模式的工作代码，但我希望能够通过页面上的不同触发器切换不同的模式内容。我知道我需要在其中使用 ids，但我不是 100% 确定如何使用

javascript html css modal-dialog simplemodal

回答 2 投票 0

在模态上按 Escape 键会触发父组件上的 escape 事件

这是主页。 “使用客户端”；从“react”导入 React, { useEffect, useState }; 从“./TestModal”导入TestModal；常量应用程序 = () => { const [isOpen,

javascript reactjs events modal-dialog keyboard-events

回答 1 投票 0

React 闭包中过时的 useState 值 - 如何修复？

我想在模态关闭时使用状态变量（值）。但是，在模式打开时对状态变量所做的任何更改都不会在处理程序中观察到。我不明白为什么会这样...

reactjs react-hooks modal-dialog closures stale

回答 5 投票 0

如何在每个 Ant Design 模态上拥有相同的透明蒙版？

{filteredBookings.map((预订, 索引) => ( {filteredBookings.map((booking, index) => ( <Modal key={index} // Make sure to provide a unique key open={detailModalVisible} onCancel={(e) => { setDetailModalVisible(false); setCurrentBookingIndex(null); }} footer={null}> <EachBooking key={currentBookingIndex} // Ensure EachBooking components have unique keys selectedBooking={selectedBooking} roomId={selectedRoomId} roomName={selectedRoomName} username={username} toPreviousMainModal={toPreviousMainModal} /> </Modal> ))} 我在 <EachBooking /> 中有子模态，单击主模态时将打开。当我检查 antd 自定义类 antd-modal-mask 时，它有 rgba(0, 0, 0, 0.45) 这是它们的默认值。但我在子模态中没有看到该属性，并且蒙版看起来更暗，就像它加倍或重叠 0.45 一样。我希望每个模态都有相同的 alpha 0.45 蒙版。我怎样才能做到这一点？因为您正在映射模态。这将导致出现多个模态，这些模态将相互叠加。删除映射即可工作。

reactjs modal-dialog antd

回答 1 投票 0

官方示例 Svelte 模式组件未从 SvelteKit 项目中的父组件关闭

我已从 https://svelte.dev/examples/modal 给出的官方示例将 Modal 添加到我的 Sveltekit 应用程序中我的 Modal.svelte 是导出让showModal； // 布尔值让迪亚洛...</desc> <question vote="-1"> <p>我已将 Modal 添加到我的 <a href="https://kit.svelte.dev/" rel="nofollow noreferrer">Sveltekit</a> 应用程序（来自 <a href="https://svelte.dev/examples/modal" rel="nofollow noreferrer">https://svelte.dev/examples/modal</a></p> 给出的官方示例） <p>我的<pre><code>Modal.svelte</code></pre>是</p> <pre><code><script> export let showModal; // boolean let dialog; // HTMLDialogElement $: if (dialog && showModal) dialog.showModal(); </script>  <dialog bind:this={dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()} >  <div on:click|stopPropagation> <button style="float: right; font-weight: bold;" autofocus on:click={() => dialog.close()}>&times;</button> <slot name="header" /> <slot /> </div> </dialog> <style> dialog { max-width: 32em; border-radius: 0.2em; border: none; padding: 0; } dialog::backdrop { background: rgba(0, 0, 0, 0.3); } dialog > div { padding: 1em; } dialog[open] { animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes zoom { from { transform: scale(0.95); } to { transform: scale(1); } } dialog[open]::backdrop { animation: fade 0.2s ease-out; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } button { display: block; } </style> </code></pre> <p>我的<pre><code>App.svelte</code></pre>是</p> <pre><code><script> // @ts-nocheck import Modal from './Modal.svelte'; let cancelRequestId; let showModal = false; function cancleRequest(id) { showModal = true; cancelRequestId = id; } async function processCancleRequest() { showModal = false } </script> <div> <Modal bind:showModal> <h1 slot="header" style="font-weight: bold;">Request Confirmation</h1> <hr /> <p>Are you sure want to proccess request?</p> <br /> <div style="display: flex; justify-content: space-between;"> <button>No</button> <button on:click={processCancleRequest}>Yes</button> </div> </Modal> </div> <button on:click={() => cancleRequest(item.id)}></button> </code></pre> <p>单击 <pre><code>Yes</code></pre> 按钮时，我正在设置 <pre><code>showModal = false</code></pre>，但模态仍然没有关闭。</p> <p>我缺少什么才能让它发挥作用？</p> </question> <answer tick="false" vote="0"> <p>这<em>不是</em>“官方组件”，它只是一个准系统示例。<br/> （一般没有官方组件。）</p> <p>那里没有关闭模式的代码，只是打开。<br/> 您可以在组件中执行类似的操作：</p> <pre><code>$: if (dialog) { showModal ? dialog.showModal() : dialog.close(); } </code></pre> </answer> </body></html>

javascript html modal-dialog svelte sveltekit

回答 0 投票 0

官方 Svelte 模式组件未从 SvelteKit 项目中的父组件关闭

javascript html modal-dialog svelte sveltekit

回答 0 投票 0

Modal 与 React JS 最佳实践

我想制作一个模态窗口，用户可以在其中选择 3 个角色的团队。到目前为止，我一直在父组件中使用状态，例如 const [showModal,toggleModal] = useState(false); 但是

javascript reactjs modal-dialog

回答 1 投票 0

显示模式对话框（messageBox）会冻结应用程序中的其他窗口

我有一个应用程序，显示托管在同一消息循环线程中的多个不同的顶级窗口。其存在是为了允许用户打开相同数据的不同视图。（在 MS 输出中...

c# winforms modal-dialog