Is it good practice to use the event object to access an html node in ReactJs?

Is it good practice to use the event object to access an HTML node in react?

exam:

function MyComponent() {

function handleSubmit(e) {
        e.preventDefault()
        //use event object to access html node
        console.log(e.target.name.value)
    }

return (
      <div>
          <form onSubmit={handleSubmit}>
            <input name='name'>
          </form>
      </div>
       )
}

Or should I use a reference?

function MyComponent() {

let textInput = useRef(null)

function handleSubmit(e) {
        e.preventDefault()
        console.log(textInput.current.value)
    }

return (
      <div>
          <form onSubmit={handleSubmit}>
            <input ref={textInput} name='name'>
          </form>
      </div>
       )
}

It is easier to use the event object to access the node, but is it good practice, is it recommended?

Answer

there is no problem with reading event objects until you don’t modify the DOM contents directly because react can’t notice that and this will cause some problems…