How to add ref to a conditional rendering component and make it work in React-CodePudding

I'm trying to build a table component and make one of its cells editable.

I need this cell to be clickable, and if clicked, an input component would replace the button, and it would get focused automatically so that users can decide the text of this cell.

Now in the first rendering, button would be rendered, which leads to the binding ref of Input failing.

Here is my simplified code:

import { Input, InputRef, Button } from 'antd'
import { useRef, useState, useEffect } from 'react'
export default function App() {
  const [showInput, setIsShowInput] = useState(false)
  const inputRef = useRef<InputRef>(null)
  useEffect(() => {
    console.log(inputRef.current)
  }, [inputRef, showInput])
  return (
    <div className="App">
      {showInput ? <Input ref={inputRef} onBlur={() => {
        setIsShowInput(false)
      }} /> :
        <Button onClick={() => {
          setIsShowInput(true)
          if (showInput) inputRef.current?.focus()
        }}>Edit me</Button>}
    </div>
  );
}

How can I make the binding of ref takes effect in the first rendering, so when I click the button, Input would get focused. Or is there any other way to achieve this?

CodePudding user response：

The easiest way to achieve this is to watch the showInput value. If the value is true then call the focus method, otherwise do nothing as the Input component will be unmounted from the App.

export default function App() {
  const [showInput, setIsShowInput] = useState(false)
  const inputRef = useRef(null)

  useEffect(() => {
    if (!showInput)  return;

    inputRef.current.focus()
  }, [showInput])


  return (
    <div className="App">
      {showInput ? <Input ref={inputRef} onBlur={() => {
        setIsShowInput(false)
      }} /> :
        <Button onClick={() => setIsShowInput(true)}>Edit me</Button>}
    </div>
  );
}