Blazor JSRuntime专注于foreach中的Element

时间:2019-12-28 22:57:02

标签: blazor

当我在“表单集”中创建新表单时,我想关注新表单。

使用此代码,我得到了期望的结果,但是我得到了“发生未处理的错误。重新加载”和控制台中的以下错误:

errors in console

非常感谢!

# library(ggpubr)
# library(ggplot2)

df1 <- data.frame(
  x = c(2, 5, 7, 9),
  y = c(1, 2, 1,  2),
  z = factor(1:4)
)

df2 <- data.frame(
  x = c(2, 5, 5.1, 9),
  y = c(1, 2, 1  ,  2),
  z = factor(1:4)
)

df3 <- data.frame(
  x = c(2, 5  , 7, 9),
  y = c(1, 1.1, 1, 2),
  z = factor(1:4)
)

df4 <- data.frame(
  x = c(2, 5  , 5.1, 9),
  y = c(1, 1.1, 1  , 2),
  z = factor(1:4)
)

ggarrange(
  ggplot(df1, aes(x, y)) + geom_tile(aes(fill = z)),
  ggplot(df2, aes(x, y)) + geom_tile(aes(fill = z)),
  ggplot(df3, aes(x, y)) + geom_tile(aes(fill = z)),
  ggplot(df4, aes(x, y)) + geom_tile(aes(fill = z)),
  labels = paste0("df", 1:4),
  ncol = 2, 
  nrow = 2
)

在我的代码段中:

geom_point

site.js:

<EditForm Model="todos" OnValidSubmit="Save">
    <table>
        <thead>
            <tr>
                <th>TODO</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var todo in todos)
            {
                if (todos.IndexOf(todo) != todos.Count - 1)
                {
                    <tr>
                        <td><input @bind="@todo.Name" /></td>
                    </tr>
                }
                if (todos.IndexOf(todo) == todos.Count - 1)
                {
                    <tr>
                        <td><input @ref="element" @onkeydown="@((KeyboardEventArgs e) => Newline(e))" @bind="@todo.Name" /></td>
                    </tr>
                }
            }
        </tbody>
    </table>
    <button class="btn btn-success" type="submit">Save</button>
</EditForm>

1 个答案:

答案 0 :(得分:1)

尽管出现错误消息,但我相信这与渲染的时间有关...像这样调用InvokeVoidAsync:

ElementReference element;

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("exampleJsFunctions.focusElement", element);
         }
     }

_Host.cshtml:

<script src="_framework/blazor.server.js"></script>
<script>

    window.exampleJsFunctions =
    {
        focusElement: function (element) {
           element.focus();
        }
    };
</script>