无法使 textarea 动态更改其行 - blazor答案

【问题标题】：Cant make textarea change its rows dynamicaly - blazor无法使 textarea 动态更改其行 - blazor
【发布时间】：2023-02-21 22:09:35
【问题描述】：

我有一个内部带有文本区域的组件，用户可以在其中通过参数设置行。现在我想让这个文本区域随着用户类型的增加而增长。输入的参数变为最小行数。

我现在拥有的：

组件.razor

<textarea rows="@Rows"
              value="@Value"
              @oninput=@ChangeValueAsync />

组件.razor.cs

private int MinRows { get; set; } = 1;

[Parameter]
public int Rows{ get; set; }

[Parameter]
public string Value { get; set; } = string.Empty;

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

private async Task ChangeValueAsync(ChangeEventArgs args)
{
    Rows= Math.Max(MinRows, Math.Max(Value.Split('\n').Length, Value.Split('\r').Length)+1);
    await ValueChanged.InvokeAsync(args?.Value?.ToString());
}

protected override void OnParametersSet()
{
    MinRows = Math.Abs(Math.Max(1,Rows));
    base.OnParametersSet();
}

在调试器中，我可以读取行数计算正确，但 textarea 不调整大小。任何人都可以向我解释为什么文本区域仍然相同吗？

哦.. 重要的是不要使用JavaScript。

【问题讨论】：

标签： blazor textarea

【解决方案1】：

我认为价值只有一种方式。在调试器中查看它是否在您键入时更新。

尝试这样做：

<textarea rows="@Rows"          
              @oninput=@ChangeValueAsync>@Value</textarea>

@code {
    private int MinRows { get; set; } = 1;

    [Parameter]
    public int Rows{ get; set; }

    [Parameter]
    public string Value { get; set; } = string.Empty;

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private async Task ChangeValueAsync(ChangeEventArgs args)
    {
        Value = args.Value.ToString();
        Rows= Math.Max(MinRows, Math.Max(Value.Split('
').Length, Value.Split('
').Length)+1);
        await ValueChanged.InvokeAsync(args?.Value?.ToString());
    }

    protected override void OnParametersSet()
    {
        MinRows = Math.Abs(Math.Max(1,Rows));
        base.OnParametersSet();
    }

}

例子： https://try.mudblazor.com/snippet/wEwnYGmvytNJLbTv

【讨论】：

【解决方案2】：

感谢您的快速解答。下面做了把戏

HTML

<textarea value="@Value"
          style="overflow-x: hidden; overflow-y: scroll;"
          @oninput=@ChangeValueAsync
          @attributes="@InputAttributes" />

代码

private int MinRows { get; set; } = 1;

[Parameter]
public int Rows
{
    get
    {
        return _numRows;
    }
    set
    {
        if (value >= MinRows) _numRows= value;
        else _numRows = MinRows;
    }
}

private int _numRows = 1;

[Parameter]
public string Value { get; set; } = string.Empty;

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

private async Task ChangeValueAsync(ChangeEventArgs args)
{
    int oldRows = Rows;
    await ValueChanged.InvokeAsync(args?.Value?.ToString());

    int newRows = GetNumberOfLines(args.Value.ToString());

    if (newRows == MinRows)
    {
        Rows = MinRows;
        ChangeAttribute("rows", Rows);
        StateHasChanged();
    }
    else
    {
        Rows = Math.Max(MinRows, newRows);
        if (oldRows < Rows)
        {
            ChangeAttribute("rows", Rows);
            StateHasChanged();
        }
    }
}

private int GetNumberOfLines(string s)
{
    int result = Math.Max(s.Split("
").Length, 1);
    result = Math.Max(s.Split("
").Length, result);
    result = Math.Max(s.Split("
").Length, result);
    return result;
}

private void AddAttribute(string key, object value)
{
    if (!InputAttributes.ContainsKey(key))
        InputAttributes.Add(key, value);
}

private void ChangeAttribute(string key, object value)
{
    if (InputAttributes.ContainsKey(key)) InputAttributes.Remove(key);
        InputAttributes.Add(key, value);
}

protected override void OnInitialized()
{
    base.OnInitialized(); //InputAttributes gets initialized here
    MinRows = Rows;
    AddAttribute("rows", MinRows);
}

【讨论】：