如何检查React中已经在状态中设置了默认值的输入字段

Question

如果我有几个变量处于这样的状态：

const [fullName, setFullName] = useState("Jane Appleseed");
const [cardNumber, setCardNumber] = useState("1234123412341234");

我将这些值作为道具传递给一个组件，该组件将它们作为填充信息显示在屏幕上，如下所示：

return (
<div className="card-face-container">
<div className="card-number">
<FormatText cardNumber={cardNumber} />
</div>
<div className="card-name">
{fullName}
</div>
<div className="exp-date">
{expMonth}/{expYear}
</div>
</div>
);
}

然后如何检查输入字段值是否为空以显示错误消息？每当我尝试使用if(fullName === "")检查输入值时，它都不是空的，因为它已经有了这个默认值，我这样设置它：

<label>
<div>
Placeholder Name
</div>
<input
type="text"
placeholder="e.g Jane Appleseed"
onChange={(e) => { getName(e.target.value) }}
className="wide-input name-input"
//Only allow input of letters for full name
onKeyPress={(e) => preventNumbers(e)}
/>
</label>

Answer 1

您可以做两件事。

• 您可以取消设置fullName的默认值，而是使用输入占位符。因为你只是想在没有输入fullName的情况下显示一些东西。在这样做的过程中，你最初的逻辑会起作用
• 其次，您可以使用两个条件，第一个条件是检查变量fullName是否为空或等于Jane Appleseed。但这样做的缺点是，没有用户能够使用全名Jane Appleseed，因为它会将其标记为错误