讓我們說名為 cinput.cshtml 的子組件是<input type="text" bind="@username">@functions{string username;}父組件稱為 pform.cshtml<cinput></cinput><input type="text" bind="@email"><input type="button" onclick="@onsubmit">@functions{string email;public void onsubmit(){ //Call api}}所以問題是如何在父組件中獲取用戶名值？
3 回答
白板的微信
TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊
您應(yīng)該執(zhí)行以下操作：
在您的子組件中定義一個(gè) EventCallback 委托屬性：
[Parameter] protected EventCallback<string> OnUserNameChanged { get; set; }
此屬性將包含對父組件上定義的方法的委托。
在您的子組件中定義一個(gè)屬性和一個(gè)支持變量：
private string username;
public string UserName
{
get => username;
set
{
username = value;
// Invoke the delegate passing it the changed value
OnUserNameChanged?.Invoke(value);
}
}
在您的父組件中定義一個(gè)方法，該方法在用戶名更改時(shí)從子組件調(diào)用：
public async void UserNameChanged(string username)
{
// Gets and consume the user name
}
這就是您的子組件在父組件中的使用方式：請注意，我們將方法名稱分配給屬性 OnUserNameChanged，這是子組件中的委托屬性
<cinput OnUserNameChanged="UserNameChanged" ></cinput>
<input type="text" bind="@email">
<input type="button" onclick="@onsubmit">
希望這可以幫助...
這就是 Steve Anderson 對 ref 的評價(jià)：
用例
預(yù)期用例是允許父組件向子組件發(fā)出命令，例如“顯示”或“重置”。
即便如此，從架構(gòu)上講，這也是一種妥協(xié)，因?yàn)槿绻淖咏M件是無狀態(tài)的（即，除了它們的參數(shù)之外，不作用于任何狀態(tài)），它仍然會更干凈，在這種情況下，從理論上講它甚至不可能發(fā)布除了改變他們孩子的參數(shù)之外的“行動”，在這種情況下你根本不需要 ref 。
強(qiáng)烈不建議您使用 ref 作為改變子組件狀態(tài)的方法。相反，始終使用普通的聲明性參數(shù)將數(shù)據(jù)傳遞給子組件。這將導(dǎo)致子組件在正確的時(shí)間自動重新渲染。我們正在努力改變組件參數(shù)的表示方式，以便默認(rèn)情況下它們被封裝并且不可能從外部讀取/寫入。
嚕嚕噠
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
開拓者方式：
要做到這一點(diǎn)，他們打算在 Blazor 中完成，首先使用 Blazor 組件。下面的示例使用組件 SingleSelect.razor，它是一個(gè)簡化的 HTML Select 元素。
該組件由 VisualStudio 根據(jù) razor 組件文件的名稱自動生成的標(biāo)簽引用，因此在這種情況下標(biāo)簽將為<SingleSelect>.
為了從子組件獲取值，父組件創(chuàng)建了一個(gè)指向子組件的引用變量。
這是通過在父級中創(chuàng)建子級的局部變量來完成的：
private SingleSelect singleSelect;
然后將其鏈接到子標(biāo)簽中：
<SingleSelect @ref="singleSelect" Options="SingleSelectOptions"></SingleSelect>
這允許通過使用引用變量來引用子數(shù)據(jù)：
singleSelect.SelectedOption.Value
以下幾頁給出了一個(gè)完整的例子。
Index.razor page
@page "/"
<h3>Single Select Example</h3>
<h5 class="mt-2">Make your selection</h5>
<SingleSelect @ref="singleSelect" Options="SingleSelectOptions"></SingleSelect>
<button class="btn btn-primary mt-2" @onclick="SubmitSingleSelect">Submit</button>
<h5 class="mt-2">The following was selected:</h5>
<p>@singleSelectResult</p>
@code
{
public partial class Index
{
SingleSelect singleSelect;
string singleSelectResult;
List<SingleSelectOption> SingleSelectOptions = new List<SingleSelectOption>
{
new SingleSelectOption{ Id=1, Value="One"},
new SingleSelectOption{ Id=2, Value="Two"},
new SingleSelectOption{ Id=3, Value="Three"},
new SingleSelectOption{ Id=4, Value="Four"},
new SingleSelectOption{ Id=5, Value="Five"},
new SingleSelectOption{ Id=6, Value="Six"},
new SingleSelectOption{ Id=7, Value="Seven"},
new SingleSelectOption{ Id=8, Value="Eight"},
new SingleSelectOption{ Id=9, Value="Nine"},
new SingleSelectOption{ Id=10, Value="Ten"},
new SingleSelectOption{ Id=11, Value="Eleven"},
};
private void SubmitSingleSelect()
{
singleSelectResult = singleSelect.SelectedOption.Value;
}
}
}
SingleSelect.razor page
<div class="container">
<div class="row">
<div class="col-3">
<select id="NotSelected" class="border" multiple="multiple" size="@boxSize" style="width: 200px">
@foreach (var option in Options)
{
<option id="@option.Id" @onclick="@(() => Select(option))">@option.Value</option>
}
</select>
</div>
</div>
</div>
@code
{
[Parameter]
public List<SingleSelectOption> Options { get; set; } = new List<SingleSelectOption>();
public SingleSelectOption SelectedOption { get; set; } = new SingleSelectOption { Id = 0, Value = " "};
private int boxSize = 5;
private void Select(SingleSelectOption option)
{
SelectedOption = option;
}
public class SingleSelectOption
{
public int Id { get; set; }
public string Value { get; set; }
}
}
回首憶惘然
TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊
所以我做了這樣的事情
cinput.cshtml
<input type="text" bind="@username">
@functions{
string username;
string getUsername(){
return username;
}
}
在 pform.cshtml 中
<cinput ref="_cinput"></cinput>
<input type="text" bind="@email">
<input type="button" onclick="@onsubmit">
@functions{
string email;
Cinput _cinput
public void onsubmit(){
//get username
string uname = _cinput.getUsername();
//Call api
}
}
https://learn.microsoft.com/en-us/aspnet/core/razor-components/components?view=aspnetcore-3.0#capture-references-to-components
- 3 回答
- 0 關(guān)注
- 395 瀏覽
添加回答
舉報(bào)
0/150
提交
取消