Blazor get a reference to clicked element

Question

I am having multiple disabled inputTexts and I want to enable just the clicked one. This is a snippet of what I want to do.

<div>
    <InputText disabled="Selected==thisinput" @onclick="(()=>Selected==this;"/>
    <InputText disabled="Selected==thisinput" @onclick="(()=>Selected==this;"/>
    <InputText disabled="Selected==thisinput" @onclick="(()=>Selected==this;"/>
    ... there is other
</div>

@code {
    InputElement Selected = null;
}

If I can use code like that, it will be great, but I don't think it is possible. So any ideas how to do it?

Answer 1

Your question does not clearly explain why you need the reference, but from the code it looks like you just want to disable or enable the InputText that you clicked on.

Trying to disable and enable the InputText from its own @onclick is not a great idea.

If the InputText is disabled the @onclick does not raise the click event at all. If you start with all the inputs enabled and click in it to start typing, or by accident, it will disable the input and you will not be able to enable it again.

What you could do is create a CustomInputText that inherits from InputText, that way you can access to the component you are working on. Then add a button or checkbox to it to handle the enabling and disabling of the input.

CustomInputText.razor - file

@inherits InputText

<InputText disabled="@_IsDisabled" @bind-Value="@CurrentValue" @attributes="AdditionalAttributes" class="@CssClass"
           @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />
<button @onclick="ChangeDisabledState">
    @(_IsDisabled?"Enable":"Disable" )
</button>

@code {
   //any code here will be referencing this instance of the component.

    private bool _IsDisabled { get; set; } = false;

    protected void ChangeDisabledState() => _IsDisabled = !_IsDisabled;
}

Then use the CustomInputText the same way as you would use the standard InputText with the @bind-Value=... parameter.

 <CustomInputText @bind-Value="@someModel.value" />

If you don't want to create a custom component you could possibly keep track of the items by using an array of bool values, but it's messy and you need to know how many fields there are etc... for example:

        <InputText disabled="@componentStates[0]" @bind-Value="@someModel.value1" />
        <button @onclick="() => SwitchComponentDisabledState(0)">@SwitchToState(0)</button>
        <InputText disabled="@componentStates[1]" @bind-Value="@someModel.value" />
        <button @onclick="() => SwitchComponentDisabledState(1)">@SwitchToState(1)</button>

@code {

    bool[] componentStates = new bool[] { false, false };

    protected string SwitchToState(int compIndex) => componentStates[compIndex] ? "Enable" : "Disable";
    
    protected void SwitchComponentDisabledState(int componentIndex)=> componentStates[componentIndex] = !componentStates[componentIndex];

}

Then it looks like this:

Hope this helps or is what you referred to with your question.