CODEWITHSUNDEEP
reactjsantd
crimsonpython24
crimsonpython24

Reputation: 2383

Select React Input

Let's say that I have the following code:

function something() {
  return (
    <Input.Password name="password" id="password_id"/>
  )
};

And I want to call .blur() on <Input.Password/> outside of the return statement. Will there be any ways to achieve this in a function?

P.S. this is a part of Ant Design's input. Here's the API of the .blur() function and the focus demo. I essentially want to remove the focus of input by calling the blur function but I don't know how to target the specific input field.

Thanks in advance.

Upvotes: 0

Views: 110

Answers (2)

user15367692
user15367692

Reputation:

I found this in the docs you linked:

<Space direction="vertical">
  <Input.Password placeholder="input password" />
  <Input.Password
   placeholder="input password"
   iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
/>

This is a password input with the eye icon that reveals the value on click. But i found nothing about the blur method

Upvotes: 1

Elabbasy00
Elabbasy00

Reputation: 678

Actually you have to use ref and assignt to input and you can use it any whare with name var.current

    import React, {useRef,useEffect} from "react"
    
    
     function something() {
        const ref = useRef(null)
        
        
        useEffect(() => {
          consle.log(ref.current)
          ref.current.focus();
         
    
    , []}
    
    
       
          return (
            <Input.Password ref={ref} name="password" id="password_id"/>
          )
        };

Upvotes: 1

Related Questions