May 28, 2023

Two ways to solve: The property “value” does not exist on the type “HTMLElement” encountered using React

  const replayInputRef = useRef(null)

<textarea
className={styles['com-btm-reply-text']}
  id='re_input'
  ref={replayInputRef}
  onKeyDown={replayInputText}
  placeholder="Enter,Shift+Enter"
  autoComplete="off"
  autoFocus={true} >
</textarea>

// @ts-ignore
  const replayInputText = (e) => {
    const replayInputRefCurrent = replayInputRef.current as unknown as HTMLDivElement as any
    const replayText = replayInputRefCurrent.value


    if (!e.shiftKey && e.keyCode === 13) {
      e.cancelBubble = true; 
      e.stopPropagation();
      e.preventDefault(); 
      setOnEnter('onEnter')
      replayInputRefCurrent.value = ''
      setList([
        ...list,
        {
          id: list.length + 1,
          useId: 'User_10',
          time: '2022-10-10 08:00:00',
          solve: 'solved',
          content: replayText
        }
      ])
    }
  }

In tsx, if you don’t use any, use this second method

// @ts-ignore
  const replayInputText = (e) => {
    let replayInputRefCurrent = (document.getElementById('re_input') as HTMLInputElement).value;
    if (!e.shiftKey && e.keyCode === 13) {
      e.cancelBubble = true; 
      e.stopPropagation();
      e.preventDefault();
      setOnEnter('onEnter');
      (document.getElementById('re_input') as HTMLInputElement).value = ''
      setList([
        ...list,
        {
          id: list.length + 1,
          useId: 'User_10',
          time: '2022-10-10 08:00:00',
          solve: 'solved',
          content: replayInputRefCurrent
        }
      ])
    }
  }

IN TSX

  const replayInputText = (e: React.KeyboardEvent) => {
    const replayInputRefCurrent = (document.getElementById('re_input') as HTMLInputElement).value
    if (!e.shiftKey && e.key === 'Enter') {
      // e.cancelBubble = true 
      e.stopPropagation()
      e.preventDefault() 
      setOnEnter('onEnter')
        ; (document.getElementById('re_input') as HTMLInputElement).value = ''
      setList([
        ...list,
        {
          id: list.length + 1,
          useId: 'User_10',
          time: '2022-10-10 08:00:00',
          solve: 'solved',
          content: replayInputRefCurrent
        }
      ])
    }
  }

Leave a Reply