Javascript 在JS表单中按下按钮时转到函数

我在JS中创建了表单并做出反应，当用户按下“提交”按钮时，我希望它触发函数“提交”，并传递表单中的所有值。 我怎么做

import React from 'react';

export default function MessageForm(){

    const submit = (values) => {
        console.log(values);
    }

    return(
        <div class="row">
            <div class="col-xl-4 col-lg-4 tm-flex-center-v tm-section-left">
                <form action="http://localhost:3001/messaging/write-message" class="tm-contact-form" method="POST">
                    <div class="form-group mb-4">
                        <input type="text" id="sender" name="sender" class="form-control" placeholder="From" required/>
                    </div>
                    <div class="form-group mb-4">
                        <input type="text" id="receiver" name="receiver" class="form-control" placeholder="To" required/>
                    </div>
                    <div class="form-group mb-4">
                        <textarea rows="1" id="subject" name="subject" class="form-control" placeholder="Subject..." required></textarea>
                    </div>
                    <div class="form-group mb-6">
                        <textarea rows="5" id="message" name="message" class="form-control" placeholder="Message..." required></textarea>
                    </div>
                    <div class="form-group mb-0 text-right">
                        <button type="submit" onClick="submit" class="btn tm-btn-primary tm-send-btn">Send</button>
                    </div>
                </form>
            </div>
            <div class="col-xl-8 col-lg-8 tm-circle-img-container tm-contact-right">
                <img src="../img/img-01.jpg" alt="message" class="rounded-circle tm-circle-img"/>
            </div>
        </div>
    )
}

从“React”导入React；
导出默认函数MessageForm（）{
const submit=（值）=>{
console.log（值）；
}
返回(
发送
)
}

只需将按钮标记onClick属性Send中的{submit}替换为{submit}

onClick={submit}

而不是

onClick=“submit”

。传递实际函数本身，而不是带有函数名的字符串。回调将接收一个参数

事件

，而不是

值

。您可能需要使用受控组件将所有单独的表单值存储在状态中。看到了吗，但在我完成之后，每次我按submit，它都会刷新页面