React中如何检测已设置默认值的输入字段是否为空？

在React组件中，我给fullName和cardNumber设置了带默认值的state：

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

这些值作为props传入子组件用于页面显示：

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>

核心问题是当前state同时承担了「默认显示值」和「用户输入值」两个角色，导致无法区分用户是未输入还是主动清空。可以用以下几种方式解决：

方法1：拆分显示状态与输入状态 #

新增一个专门存储用户输入的state，显示时优先使用输入值，为空则回退到默认值：

// 新增输入专用state，初始为空
const [inputFullName, setInputFullName] = useState("");
const [fullName, setFullName] = useState("Jane Appleseed");

修改输入框的onChange逻辑：

<input
    type="text"
    placeholder="e.g Jane Appleseed"
    onChange={(e) => setInputFullName(e.target.value)}
    className="wide-input name-input"
    onKeyPress={(e) => preventNumbers(e)}
/>

页面显示时的逻辑：

<div className="card-name">
    {inputFullName || fullName}
</div>

检测输入为空的判断：

// 用trim处理用户输入空格的情况
if (inputFullName.trim() === "") {
    // 显示错误提示
}

方法2：添加用户输入标记 #

给state新增一个布尔值标记，记录用户是否有过输入操作，判断错误时结合标记和值：

const [fullName, setFullName] = useState("Jane Appleseed");
// 标记用户是否主动输入过
const [hasUserInput, setHasUserInput] = useState(false);

修改输入框的onChange逻辑：

<input
    type="text"
    placeholder="e.g Jane Appleseed"
    onChange={(e) => {
        setFullName(e.target.value);
        setHasUserInput(true); // 用户输入后标记为true
    }}
    className="wide-input name-input"
    onKeyPress={(e) => preventNumbers(e)}
/>

检测输入为空的判断：

// 只有用户主动输入过，且值为空时才提示错误
if (hasUserInput && fullName.trim() === "") {
    // 显示错误提示
}

方法3：直接绑定输入框值并清空默认值（适合不需要保留默认显示的场景） #

如果不需要在用户未输入时显示默认姓名，可以直接把fullName的初始值设为空，输入框的value绑定这个state：

const [fullName, setFullName] = useState("");

修改输入框：

<input
    type="text"
    placeholder="e.g Jane Appleseed"
    value={fullName}
    onChange={(e) => setFullName(e.target.value)}
    className="wide-input name-input"
    onKeyPress={(e) => preventNumbers(e)}
/>

此时判断空值就可以直接用：

if (fullName.trim() === "") {
    // 显示错误提示
}

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