Question

说一个叫做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
}
}

所以问题是如何在父组件中获取用户名值？

Answer 1

您应该执行以下操作：

在您的子组件中定义一个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用作改变子组件状态的一种方式。相反，请始终使用常规的声明性参数将数据传递给子组件。这将导致子组件在正确的时间自动重新渲染。我们正在朝着改变组件上参数的表示方式迈进，以便默认情况下将它们封装起来，并且无法从外部进行读取/写入。

Answer 2

您直接需要的是类似ref参数的东西。不支持afaik。

当您要编写表格时，它可能是这样的：

1）将可变类型添加到您的项目中。 System.String是不可变的，因此我们需要：

public class StringWrapper
{
    public string Value { get; set; }
}

2）将其作为参数添加到cinput：

<input type="text" bind="@username.Value" />    
@functions{    
    [Parameter]
    StringWrapper username { get; set;  }    
}

3）然后，顶层表单可以公开一个cinput可以更改的包装器：

<cinput username="@userName"></cinput>

@functions{    
    StringWrapper userName = new StringWrapper { Value = "John Doe" };
    string email;

    public void onsubmit()
    {
        //Call api with userName.Value    
    }
}

Answer 3

所以我做了这样的事情

cinput.cshtml

Expired

在pform.cshtml

<input type="text" bind="@username">

@functions{
string username;

string getUsername(){
 return username;
}

}

https://docs.microsoft.com/en-us/aspnet/core/razor-components/components?view=aspnetcore-3.0#capture-references-to-components

在Blazor的父组件中获取子组件绑定值

3 个答案: