كيفية ضبط التركيز على حقل الإدخال بعد ان يشتغل مكون react؟

مرحباً بك: 

1. في البداية تعطي للحقل ref ويكون مثلا عبارة عن callback ref

   class App extends React.Component{
   
     render() {
       return(
         <div>
           <input 
             ref={input => { this.inputRef = input; }} 
           />
         </div>
       );
     }
   }

    

2. بعد ذلك تقوم بالتركيز على الحقل في أي مكان 
    

   componentDidMount() {
   	this.inputRef.focus();
   }

    

إذا كنت تريد أن تقوم بالتركيز على حقل الإدخال عندما يتم عرض المكون فقط يمكنك ببساطة استخدام ال atteibute الذي يسمى autoFocus مع حقل الإدخال كما يلي:

<input type="text" autoFocus />

أو يمكنك القيام بالتالي لتنفيذ ال focus dynamically:

class App extends Component {
  constructor(props){
    super(props)
    this.inputFocus = utilizeFocus()
  }

  render(){
    return (
      <> 
          <button onClick={this.inputFocus.setFocus}>
             FOCUS
          </button>
          <input ref={this.inputFocus.ref}/>
      </>
    )
  } 
}


const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}