react父组件引用子组件，子组件点击button按钮导致父组件的重新渲染
父组件引用子组件：
MessageInput socket={socket} myRef={textareaRef} addChatRecord={updateChatRecord} /></div>
子组件：
const MessageInput = (props: textareaProps) => {
return (
<form className="sendMessageFom">
{<textarea
placeholder="发送消息给TA"
value={sendMessageValue}
onChange={(e) => {
setSendMessageValue(e.target.value)
adjustHeight(e)
}}
className="message-input"
/>}
{
sendMessageValue=='' && <div className="placeholder-icon">
<img src={startIcon}></img>
</div>
}
{ <button className="send-button" type="submit" onClick={handleClick}>发送</button> }
</form>
);
}
export default MessageInput;
点击子组件的button按钮导致父组件刷新，原因是子组件使用了form表单，并设置了button按钮的type类型为submit,导致向服务器发送请求并刷新页面
解决办法：
1、去除<form>,改为<div>
2、将button按钮的类型改为type="button"