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

我有一个React表单，只有一个文本区域和一个提交按钮。我首先将submit按钮的状态设置为disabled，然后在用户输入100个字符或更多字符后，我希望启用submit按钮

我现在遇到的问题是，在输入超过100个字符后，submit按钮仍然处于禁用状态，并且不会更改为enabled状态

这是我在textarea字段的

onChange

上调用的

updateFieldLength

函数

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

这是

validateFieldLength

函数：

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

函数validateFieldLength（）{
如果（submitDisabled&&text.length>100）{
setSubmitDisabled（假）；
}否则，如果（！submitDisabled&&text.length您的问题似乎是只有在textarea失去焦点时才会触发onchange事件。我想它会与oninput事件一起工作，如下所示


const setBackground=（元素，背景）=>{
element.style.background=背景；
}
使用onchange的示例，开始键入。。。
例如，在oninput中，开始键入…
您的问题似乎是只有当textarea失去焦点时才会触发onchange事件。我想它会与oninput事件一起工作，如下所示


const setBackground=（元素，背景）=>{
element.style.background=背景；
}
使用onchange的示例，开始键入。。。
例如，在oninput中，开始键入…
这应该可以完成任务

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>
        </>
    )
}

从“React”导入React
常量MyComponent=（）=>{
const[text，setText]=useState（“”）
常量handleTextChange=e=>{
setText（例如target.value）
}
返回(
{text}
提交
)
}
这应该可以完成这项工作

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>
        </>
    )
}

从“React”导入React
常量MyComponent=（）=>{
const[text，setText]=useState（“”）
常量handleTextChange=e=>{
setText（例如target.value）
}
返回(
{text}
提交
)
}
您可以添加其余的组件代码吗？如果看不到其余的代码，很难说，但是您不能根据提交按钮上的文本长度传入
禁用的
道具吗？您不必管理单独的状态。
禁用={text.length这是一个非常好的主意，它简化了很多。它很有效。非常感谢@andrewgican您可以添加其余的组件代码吗？如果看不到其余的代码，很难说，但是您不能根据提交按钮上的文本长度传入
禁用的
道具吗？您不必管理单独的状态。
di马刀={text.length这是一个非常好的主意，它简化了很多。它很有效。非常感谢@andrewgiI出于好奇尝试了这个方法。它现在不允许我输入任何东西。除了oninput事件之外，我还需要一个onChange事件吗？我的错，我应该提到这是React。它被标记为React和JS。我应该我在q中提到了React。我将其更新为React的onInput，但如果我使用原始代码，它的行为与onChange相同。但是值得尝试。我只是出于好奇而尝试。它现在不允许我输入任何内容。除了onInput事件之外，我还需要onChange事件吗？我的错，我应该提到这一点s React。它被标记为React和JS。我应该在q中提到React。我将它更新为React的onInput，但如果我使用原始代码，它的行为与onChange相同。但是值得尝试。你能告诉我为什么我上面的原始代码不起作用吗？我已经根据上面的评论进行了此更改。你能告诉我吗为什么我上面的原始代码不起作用？我已经根据上面的评论做了这个更改。