讓我們說名為 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貢獻1883條經驗 獲得超3個贊
您應該執行以下操作：
在您的子組件中定義一個 EventCallback 委托屬性：
[Parameter] protected EventCallback<string> OnUserNameChanged { get; set; }
此屬性將包含對父組件上定義的方法的委托。
在您的子組件中定義一個屬性和一個支持變量：
private string username;
public string UserName
{
get => username;
set
{
username = value;
// Invoke the delegate passing it the changed value
OnUserNameChanged?.Invoke(value);
}
}
在您的父組件中定義一個方法，該方法在用戶名更改時從子組件調用：
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 的評價：
用例
預期用例是允許父組件向子組件發出命令，例如“顯示”或“重置”。
即便如此，從架構上講，這也是一種妥協，因為如果您的子組件是無狀態的（即，除了它們的參數之外，不作用于任何狀態），它仍然會更干凈，在這種情況下，從理論上講它甚至不可能發布除了改變他們孩子的參數之外的“行動”，在這種情況下你根本不需要 ref 。
強烈不建議您使用 ref 作為改變子組件狀態的方法。相反，始終使用普通的聲明性參數將數據傳遞給子組件。這將導致子組件在正確的時間自動重新渲染。我們正在努力改變組件參數的表示方式，以便默認情況下它們被封裝并且不可能從外部讀取/寫入。
嚕嚕噠
TA貢獻1784條經驗 獲得超7個贊
開拓者方式：
要做到這一點，他們打算在 Blazor 中完成，首先使用 Blazor 組件。下面的示例使用組件 SingleSelect.razor，它是一個簡化的 HTML Select 元素。
該組件由 VisualStudio 根據 razor 組件文件的名稱自動生成的標簽引用，因此在這種情況下標簽將為<SingleSelect>.
為了從子組件獲取值，父組件創建了一個指向子組件的引用變量。
這是通過在父級中創建子級的局部變量來完成的：
private SingleSelect singleSelect;
然后將其鏈接到子標簽中：
<SingleSelect @ref="singleSelect" Options="SingleSelectOptions"></SingleSelect>
這允許通過使用引用變量來引用子數據：
singleSelect.SelectedOption.Value
以下幾頁給出了一個完整的例子。
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貢獻1847條經驗 獲得超11個贊
所以我做了這樣的事情
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 關注
- 413 瀏覽
添加回答
舉報
0/150
提交
取消