React实现输入框为空禁用按钮，删除内容后按钮未恢复禁用如何解决？

• 你声明text状态时初始值是空字符串，但在autoComplete回调中调用setText时传入了对象{ value: e.target.value }，导致后续text的类型从字符串变成了对象
• 当你把输入框内容全部删除时，text的值是{ value: "" }，JS中对象属于真值，!text的判断结果为false，所以按钮不会触发禁用逻辑
• 另外输入框没有绑定value属性，属于非受控组件，不符合React受控组件的常规使用逻辑

import { useState } from "react";

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

  const autoComplete = (e) => {
    // 直接传入字符串值，不要包成对象
    setText(e.target.value);
  };

  return (
    <form>
      {/* 绑定value属性，变为受控组件，状态和视图保持同步 */}
      <input 
        type="text" 
        placeholder="search here" 
        value={text}
        onChange={autoComplete} 
      />
      <button type="submit" disabled={!text.trim()}> find </button>
    </form>
  );
}

按钮禁用判断里加的trim()是为了避免用户只输入空格时按钮可点击的问题，如果不需要过滤空格场景，直接用!text即可。

内容的提问来源于stack exchange，提问作者Vishal Sharma