如何在不使用onChange的情况下动态检查输入是否为空？答案

【问题标题】：How to dynamically check if input is empty without using onChange?如何在不使用onChange的情况下动态检查输入是否为空？
【发布时间】：2022-01-31 01:09:17
【问题描述】：

我想从input控件获取一次性信息，什么时候值为空，什么时候不为空

现在我正在使用onChange，如下所示：

<Input onChange={onChangeValue()} />

但是这个onChangeValue方法每次我输入输入时都会运行，但我想要两次信息，第一次是输入的值为空，第二次是输入的值不为空。

谁能告诉我该怎么做？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

您可以在您的 onChangeValue() 函数之前添加一些逻辑来检查输入值的长度，然后调用 onChangeValue()：

beforeOnChangeValue = function() {
  if(arguments[0].target.value.length <= 1) return onChangeValue(arguments)
}

<Input onChange={beforeOnChangeValue} />

这样onChangeValue()函数只会在输入被清空或放入第一个字符时被调用

【讨论】：

【解决方案2】：

您似乎正在使用受控组件（在每次键入时更改控件的值）。我认为根据您的策略，您可以像这样在 onChange 处理程序中使用标志

  function onChange (evt) {
    setIsEmpty(!!evt.target.value);
    // Your code ...
  }

这样你就永远知道输入是否为空。

   function Form () {
     const [isEmpty, setIsEmpty] = React.useState(false);
     
      // onChange here

      return <Input className={isEmpty ? 'empty-class' : 'non-empty-class'} />
   }

【讨论】：

我认为您不理解主帖中的问题
我知道，但是，我不明白为什么您不能检查每个 onChange 的状态。您已经在每次按键时运行重新渲染