验证字段长度后，提交按钮未从禁用更改为启用

Question

I have a React form with just a text area and a submit button. I set the submit button's state to disabled to begin with, and then after the user enters 100 chars or more I want to enable the Submit button.

The issue I'm having right now is that after I input more than 100 chars, the submit button remains disabled and doesn't change to enabled state.

This is the updateFieldLength function I am calling upon the textarea field's onChange .

const updateFieldLength = e => (
    setText(e.target.value), () => (
      validateFieldLength()
    )
  )

and this is the validateFieldLength function:

function validateFieldLength() {
    if (submitDisabled && text.length > 100) {
      setSubmitDisabled(false);
    } else if (!submitDisabled && text.length <= 100) {
      setSubmitDisabled(true);
    }
  }

Answer 1

Your problem seems to be that the onchange event is triggered only when textarea loses focus. I guess it would work with the oninput event, shown below

 const setBackground = (element, background) => { element.style.background = background; }

 <textarea id="test-on-change" onchange="setBackground(this, 'green')" rows="10" cols="30">Example with onchange, start typing...</textarea> <textarea id="test-on-input" oninput="setBackground(this, 'yellow')" rows="10" cols="30">Example with oninput, start typing...</textarea>

Answer 2

This should do the job

import React from 'react'

const MyComponent = () => {
    const [text, setText] = useState('')

    const handleTextChange = e => {
        setText(e.target.value)
    }

    return(
        <>
            <textarea onChange={handleTextChange}>
                {text}
            </textarea>
            
            <button disabled={text.length < 100}> 
                Submit
            </button>
        </>
    )
}