ReactJS adding a value to Form.submit() on Menu click - reactjs

Question

fellow Stackers! I probably have a simple question, but can't seem to find the answer...
What I want to achieve:
I have this kind of commenting logic. Basically, when a person comments without any status change a button calls postComment and all works fine. Now when a user comments & selects to change status it presses on Menu.Item (ref antd) which would send the element key for me to grab and work around some logic.
const onMenuClick = (e) => {
postComment(e);
};
<Menu onClick={onMenuClick}>
<Menu.Item key="Done">
<div>
<Row>
<Col md={2}>
<CheckCircleOutlined style={{ color: "limegreen", fontSize: '1.5em' }} className='mt-2 mr-2' />
</Col>
<Col md={20} className="ml-2">
<Row md={24}><Col className="font-weight-semibold"> Comment & Done</Col></Row>
<Row md={24}><Col className="text-muted">Comment & calculation status is done.</Col></Row>
</Col>
</Row>
</div>
</Menu.Item>
Above code does work, but for certain reasons (or my lack of knowledge) but It will jump over the usual HTML submit rules and now the function will only check for validation inside.
So what do I want? I want to use the Menu something like this:
<Menu onClick={(e) => formComment.submit(e)}>
This would submit a form and pass the Menu.Item key which I could use.
My postComment function:
const postComment = async (e) => {
console.log(e);
setCommentsLoading(true)
const formData = new FormData();
const { id } = props.match.params;
let comment;
formComment.validateFields().then(async (values) => {
//Upload and set Documents for post. This fires before validation, which is not ideal.
if (fileList.length > 0) {
fileList.forEach(file => {
formData.append('files', file);
});
await commentService.upload(formData).then((res) => { //Await only works after Async, so cant put it below validateFields()
res.data.forEach((element) => {
documents.push(element.id);
setDocuments(documents)
});
}).catch(error => {
message.error(error);
}).finally(() => {
setDocuments(documents)
}
)
} //This basically uploads and then does everything else.
console.log(values.comment)
//Checks if status should be changed.
if (e.key !== undefined) {
let variable = commentsVariable + 'Status';
let put = {
[variable]: e.key,
};
if (fileList.length <= 0 && e.key === "Done") {
message.error('Should have attachments.')
mainService.get(id).then(res => {
})
setCommentsLoading(false)
return
} else {
//No idea how to update status in the view.js, needs some sort of a trigger/callback.
mainService.put(put, id).then(res => { })
.catch(err => {
console.log(err)
return
})
}
}
if(values.comment === undefined) {
comment = `This was aut-generated comment.`;
} else {
comment = values.comment;
}
let post = {
comment: comment,
[commentsVariable]: id,
attachments: documents,
user: random(1, 4),
};
commentService.post(post).then((res) => {
mainService.get(id).then(res => {
setComments(res.data.data.attributes.comments.data)
message.success('Comment successfully posted!')
formComment.resetFields()
setFileList([])
setDocuments([])
})
});
}).catch(error => {
error.errorFields.forEach(item => {
message.error(item.errors)
setFileList([])
setDocuments([])
})
})
setCommentsLoading(false);
};
My form looks like this (I won't include Form.Items).
<Form
name="commentForm"
layout={"vertical"}
form={formComment}
onFinish={(e) => postComment(e)}
className="ant-advanced-search-form">
So in the end, I just want a proper HTML rule check before the function fires, no matter if I press the "Comment" button or press the ones with the status update.

Answer 1

So I kind of worked around it. Basically I just added a hidden field:
<Form.Item name="key" className={"mb-1"} hidden>
<Input/>
</Form.Item>
Then on Menu i addeda function that has onClick trigger, which sets the value to whatever key is there and submits:
const onMenuClick = (e) => {
console.log(e.key)
formComment.setFieldsValue({
key: String(e.key)
})
formComment.submit()
};
I'm pretty sure this is a dirty workaround, but hey, it works for a Junior dev :D Either way, I'll try to test it without hidden field where it just adds a new value.