使用React創建Material UI對話框中的表單

我正在嘗試獲取工作在Material UI對話框組件中的表單。如果我在表單標籤包裝的對話，他們甚至不中生成的HTML顯示（不知道爲什麼還）...使用React創建Material UI對話框中的表單

<form onSubmit={someFunction}> 
    <Dialog> 
    ... 
    </Dialog> 
</form>

如果我扭轉，並把表單標籤對話框裏面，表單元素顯示在HTML中，但是設置爲type =「submit」的動作按鈕不會觸發表單的onSubmit。

<Dialog> 
    <form onSubmit={someFunction}> 
    ... 
    </form> 
</Dialog>

有沒有人有任何成功讓這種組合工作？我知道我可以直接從動作按鈕單擊調用該函數，但我也使用Redux窗體並在應用程序中具有其他非對話框形式，所以我將它綁定到窗體元素。所以我真的需要以某種方式調用來自Dialog的表單提交。

來源

2016-03-28 D Durham

-1

嘿是啊我有這個組合工作......以及我使用的反應工具箱中的對話框組件與Material-ui非常相似，但他們使用CSS樣式而不是內聯。

因此，您提供給表單元素的onSubmit屬性的函數將是從redux-form函數中的handleSubmit函數。如果您想執行任何操作（如調度操作和存儲數據），則需要將onSubmit函數傳遞給handleSubmit函數。會發生什麼情況是您的onSubmit函數將與值（具有您的表單的值的屬性的對象）以及來自redux存儲的調度函數一起調用。你可以看到project我有你正在尋找的設置。

來源

2016-03-28 15:36:04 natac

的問題是關於材料的UI，並沒有關於反應-工具箱 – NSN

其實 - 我有/有onSubmit={handleSubmit(this.myFunction)}開始，這不是問題。原來的問題是Material UI如何掛載Dialog（顯然與react-toolbox不同）。他們將它安裝在身體上 - 我假設爲了更容易定位 - 因此忽略Dialog以外的任何內容。

使用對話框中的窗體，按鈕不在窗體中（與react-toolbox顯然不同）。因此，要使其工作，必須使用HTML5'表單'屬性作爲詳細的here（如果需要，還可以使用舊填充的填充）。表單需要一個id屬性，然後它外面的按鈕需要一個表單屬性，其值設置爲表單的ID。然後，對話框中的表單元素按預期工作。儘管謝謝你的迴應！

來源

2016-03-28 16:23:45

-1

代替onSubmit={someFunction}，使其

<Dialog> 
    <form onSubmit={this.someFunction}> 
    ... 
    </form> 
</Dialog>

來源

2016-08-15 08:09:27

問題是專門爲相反的情況。 – NSN

使用React創建Material UI對話框中的表單

回答

相關問題