反應代碼：
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欄位是空的，這很好。但是，
現在，當我開始打字時。然后用key將它們全部洗掉Backspace。該find按鈕不會再次禁用。
我想要：
find如果輸入欄位是，我只想禁用我的按鈕empty
我哪里做錯了？
uj5u.com熱心網友回復：
這是來自類組件的常見錯誤，鉤子中的狀態設定器不會像類中那樣合并狀態值。
您將狀態初始化為字串 ( 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>
uj5u.com熱心網友回復：
disabled={!text.value}
應該做的伎倆。有了這個功能
const autoComplete = (e) => {
setText({ value: e.target.value });
};
你是在寫你的輸入text.value，而不是在text。
uj5u.com熱心網友回復：
使用此代碼檢查文本
<button type="submit" disabled={text==''}> find </button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368350.html
上一篇：為什么呼叫useState鉤子的set函式會立即應用于異步函式？
下一篇：如何antd選單水平模式