如何检查输入是否清晰（react redux）答案

【问题标题】：how to check if input is clear (react redux)如何检查输入是否清晰（react redux）
【发布时间】：2021-02-19 16:35:34
【问题描述】：

我试图创建一个不和谐的克隆，当我在输入为空时按 Enter 键时，它显示一条空消息，知道如何防止这种情况发生吗？我是 react、firebase 和 redux 的新手。

const user = useSelector(selectUser);
const channelId = useSelector(selectChannelId);
const channelName = useSelector(selectChannelName);
const [input, setInput] = useState("");
const [messages, setMessages] = useState([]);

useEffect(() => {
    if (channelId) {

        db.collection('channels')
        .doc(channelId)
        .collection('messages')
        .orderBy('timestamp', 'desc')
        .onSnapshot((snapshot) =>
            setMessages(snapshot.docs.map((doc) => doc.data()))
        );
    }
}, [channelId])

const sendMessage = (e) => { e.preventDefault();

db.collection('channels').doc(channelId).collection('messages').add({
    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    message: input,
    user: user,

    
});
setInput('')

}

return (
    <div className="chat">
        <ChatHeader channelName={channelName}/>

        <div className="chat__messages">
            {messages.map((message) => (
                <Message 
                timestamp={message.timestamp}
                message={message.message}
                user={message.user}
                />
            ))}
        </div>

        <div className="chat__input">
            <AddCircleIcon fontSize="large"/>
            <form>
                <input 
                    id="input"
                    value={input} 
                    disabled={!channelId}
                    onChange={e => setInput(e.target.value)} 
                    placeholder={`Message #${channelName}`}
                />

                <button onClick={sendMessage} className="chat__inputButton" type="submit">
                    Send Message
                </button>
            </form>
            <div className="chat__inputIcons">
                <CardGiftcardIcon fontSize="large"/>
                <GifIcon fontSize="large"/>
                <EmojiEmotionsIcon fontSize="large"/>
            </div>
        </div>
    </div>
)

}

导出默认聊天

【问题讨论】：

到目前为止，您采取了哪些措施来防止这种情况发生？
我尝试了很多但没有用，我的意思是真的很多

标签： reactjs firebase react-redux

【解决方案1】：

只需检查其中是否有一些价值。空字符串是可伪造的，因此您可以在一行中检查它。

<input onChange={e => e.target.value && setInput(e.target.value)}/

但在您的情况下，您可能会在输入时发送表单。因此，您可以通过设置验证模式来阻止发送带有空输入的表单

<input pattenr=".+" />

或在 sumbmit 函数中进行验证。

【讨论】：

【解决方案2】：

如果您的输入为空，您需要做的就是阻止提交函数调用 firebase。

const sendMessage = (e) => { 
 e.preventDefault();
 if (input.length <= 0) return; // This will end the function here if your input is empty

 db.collection('channels').doc(channelId).collection('messages').add({
     timestamp: firebase.firestore.FieldValue.serverTimestamp(),
     message: input,
     user: user,       
 });
 setInput('')
}

【讨论】：

是的，但重要的是：你明白为什么吗？