React Native Input校验：如何拦截仅含空格的提交并弹出空值提示

只需要在校验时对输入内容做首尾去空白处理即可，JavaScript 提供的trim()方法可以直接移除字符串首尾的所有空格、制表符等空白字符，修改createChat函数的校验逻辑即可：

const [input, setInput] = useState("");

const createChat = async () => {
    // 对输入内容做trim处理后再判空，全空格的内容trim后会变成空字符串
    if(!input.trim()) {
        alert("聊天名称不能为空");
        return;
    }
    await db
    .collection("chats")
    .add({
        // 可选优化：存储时也trim，避免入库的名称带首尾多余空格
        chatName: input.trim()
    })
    .then(() => {
        navigation.goBack();
    })
    .catch((error) => {
        alert(error);
    })
};

可选扩展方案 #

如果需要从输入侧就禁止用户输入首尾空格，可以直接修改输入框的onChangeText回调：

<Input 
    placeholder="Add new chat"
    value={input}
    // 输入时就自动过滤首尾空格，用户无法输入首尾空白
    onChangeText={(text) => setInput(text.trim())}
    leftIcon={
        <Icon name="wechat" type="antdesign" size={24} color="black" />
    }
/>

这种方案下用户输入的首尾空格会被直接过滤，输入框不会展示多余的首尾空白，从源头避免全空格输入的问题。

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