React JS - 如果输入字段为空，则禁用按钮？答案

【问题标题】：React JS - disable a button if the input field is empty?React JS - 如果输入字段为空，则禁用按钮？
【发布时间】：2022-01-05 13:03:22
【问题描述】：

反应代码：

import { useState } from "react";

export default function IndexPage() {
  const [text, setText] = useState("");

  const autoComplete = (e) => {
    setText({ value: e.target.value });
  };

  return (
    <form>

      <input type="text" placeholder="search here" onChange={autoComplete} />

      <button type="submit" disabled={!text}> find </button>

    </form>
  );
}

沙盒链接：https://codesandbox.io/s/practical-panini-slpll

问题：

页面加载时，查找按钮一开始禁用，因为input字段为空，这很好。但是，

现在，当我开始输入内容时。然后用Backspace 键删除它们。 find 按钮不会再次禁用。

我想要：

如果输入字段为empty，我只想禁用我的find 按钮

我哪里做错了？

【问题讨论】：

标签： reactjs forms input next.js use-state

【解决方案1】：

使用此代码检查文本

<button type="submit" disabled={text==''}> find </button>

【讨论】：

【解决方案2】：

这是来自类组件的常见错误，钩子中的状态设置器不会像类中那样合并状态值。

您将状态初始化为字符串 (useState(''))，然后将其分配为对象

const autoComplete = (e) => {
    setText({ value: e.target.value });
};

// State is an object { value: 'some text' }

修复您的设置状态调用：

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

// State is a string 'some text'

然后更详细地检查字符串是否为空：

<button disabled={text === ''}>find</button>

【讨论】：

【解决方案3】：

disabled={!text.value}

应该做的伎俩。有了这个功能

const autoComplete = (e) => {
  setText({ value: e.target.value });
};

您将输入写入text.value，而不是text。

【讨论】：