I need the equivalent way up updating a simple text input field like so

document.getElementById("myid").value = "sample input"

using React hooks, and the textfield is an Antd control.

Here is the code I have that doesn't work:

import { Input } from "antd"
import { useRef } from "react";

export default function App() {
  const inputRef = useRef();

  const myfunction = () => {
    inputRef.current = "sample input"
  }

  return (
    <div>
      <button onClick={myfunction} >populate textbox</button>
      <p/>
      <Input ref={inputRef} />
    </div>
  );
}

CodePudding user response：

You can try this code and read a doc for React. And take a closer look at the attributes of the components that you take in antd;

const [value, setValue] = useState('');
const myfunction = () => {
 setValue('Text')
}
return (
<>
<button onClick={myfunction} >populate textbox</button>
<Input value={value}>
</>
)