Question

我在blazor组件中具有以下剃刀标记：

import cv2 as cv
import numpy as np
import math

src = cv.imread("handwriting.jpg")
src_gray = cv.cvtColor(src,cv.COLOR_BGR2GRAY)

# apply threshold
threshold = 230
_, img_thresh = cv.threshold(src_gray, threshold, 255, 0)
img_thresh = cv.bitwise_not(img_thresh)

# apply dilate
dilatation_size = 1
dilatation_type = cv.MORPH_ELLIPSE
element = cv.getStructuringElement(dilatation_type, (2*dilatation_size + 1, 2*dilatation_size+1), (dilatation_size, dilatation_size))
img_dilate = cv.dilate(img_thresh, element)

# find contours
contours = cv.findContours(img_dilate, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE)

# calculate rectangles and areas
boundRect = [None]*len(contours[1])
areas = [None]*len(contours[1])
for i, c in enumerate(contours[1]):
    boundRect[i] = cv.boundingRect(c)
    areas[i] = cv.contourArea(c)

# set drawing 
drawing = np.zeros((src.shape[0], src.shape[1], 3), dtype=np.uint8)

# you can use only contours bigger than some area
for i in range(len(contours[1])):
    if areas[i] > 1:
        color = (50,50,0)
        cv.rectangle(drawing, (int(boundRect[i][0]), int(boundRect[i][1])), \
          (int(boundRect[i][0]+boundRect[i][2]), int(boundRect[i][1]+boundRect[i][3])), color, 2)

# set newImg
newImg = np.ones((src.shape[0], src.shape[1], 3), dtype=np.uint8)*255
total_width = 0
mean_height = 0.0
n = len(boundRect)
for r in (boundRect):
    total_width += r[2]
    mean_height += r[3]/n

total_lines = math.ceil(math.sqrt(total_width/mean_height))
max_line_width = math.floor(total_width/total_lines)

# loop through rectangles and perform a kind of copy paste
curr_line = 0
curr_width = 0
for r in (boundRect):
    if curr_width > max_line_width:
        curr_line += 1
        curr_width = 0
    # this is the position in newImg, where to insert source rectangle
    pos = [curr_width, \
           curr_width + r[2], \
           math.floor(curr_line*mean_height), \
           math.floor(curr_line*mean_height) + r[3] ]
    s = src[r[1]:r[1]+r[3], r[0]:r[0]+r[2], :]
    d = newImg[pos[2]:pos[3], pos[0]:pos[1], :]
    newImg[pos[2]:pos[3], pos[0]:pos[1], :] = cv.min(d,s)
    curr_width += r[2]

cv.imwrite('detection.png',cv.subtract(src,drawing))
cv.imshow('blend',cv.subtract(src,drawing))

crop = int(max_line_width*1.1)
cv.imwrite('texture.png',newImg[:crop, :crop, :])
cv.imshow('newImg',newImg[:crop, :crop, :])

cv.waitKey()

当我在窗体上修改联系人姓名并在控件之外使用Tab键时，永远不会调用<div class="form-group row"> <label for="name">Contact: </label> <InputText id="name" @bind-Value="Contact.Name" @onchange="NameChanged"></InputText> </div>方法。为了触发NameChange事件，我还需要做其他事情吗？

Answer 1

您不能同时进行绑定值和@onchange

Answer 2

您无法执行@bind-value和@onchange，因为双向绑定订阅了onchange事件。

但是您可以手动进行：

<div class="form-group row">
    <label for="name">Contact: </label>
    <InputText id="name" Value="@Contact.Name" ValueChanged="NameChanged" ValueExpresions="() => Contact.Name" ></InputText>
</div>

@code {
    private void NameChanged(string value)
    {
        Contact.Name = value;
    }
}

Answer 3

在离开字段时尝试在输入上（键入每个符号时）或模糊使用-

<InputText id="name" @bind-Value="Contact.Name" @oninput="NameChanged" @onblur="NameChanged"></InputText>

bind-value使用@onchange更新组件值。因此，您不能一起使用它们。

来自MS documentation：

将@bind与CurrentValue属性（）一起使用基本上等同于以下内容：

<input value="@CurrentValue"
    @onchange="@((ChangeEventArgs __e) => CurrentValue = 
        __e.Value.ToString())" />

@code {
    private string CurrentValue { get; set; }
}

Answer 4

我发现了一个更短更简单的变体。

<input @bind="searchString" @bind:event="oninput" @onkeyup="SearchChanged" >

然后可以使用@onkeyup 调用任何方法。

为什么InputText的onChange事件不会在Blazor中触发？

4 个答案: