如何检查输入是否清晰(react redux)

Question

im试图创建一个不和谐的克隆，当我在输入为空时点击回车键时，它会显示一条空消息，知道如何防止这种情况发生吗？我是新来的反应者，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>
)

}

导出默认聊天

Answer 1

如果输入为空，您所需要做的就是阻止提交函数调用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('')
}

Answer 2

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

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

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

<input pattenr=".+" />

或者在sumbmit函数中进行验证。