英文:
Why I can't send data using submit button inside Form
问题
我想创建一个带有表单的简单React组件，每次用户点击"提交"按钮时，数据应该发送到服务器。
出于测试目的，我创建了一个组件，其中包含两个按钮，一个独立存在，另一个位于表单内。
return (
<>
<button onClick={submit}>Working example</button>
<form style={cellStyle} onSubmit={submit}>
<div>
<input type="submit"
value={reactDict["send"]}
className="btn btn-success"
style={{ margin: "15px 5px 5px 0px" }} />
</div>
</form>
</>
);
它们都使用相同的"submit"函数。
const submit = (event) => {
event.preventDefault();
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ test: 'some message' })
};
fetch('neededitems', requestOptions)
.then(async response => {
console.log(response);
})
.catch(error => {
console.error('There was an error!', error);
});
}
当我点击表单外部的按钮时，一切正常工作，
，
当我点击表单内部的"提交"按钮时，我收到了一个错误
。
英文:
I want to create simple react component with form inside, every time that user click Submit button, data should be send to the server.
For testing purposes I created component with two buttons, one stand alone and one inside form.
return (
<>
<button onClick={submit}>Working example</button>
<form style={cellStyle}
onSubmit={submit}>
<div>
<input type="submit"
value={reactDict["send"]}
className="btn btn-success"
style={{ margin: "15px 5px 5px 0px" }} />
</div>
</form>
</>
);
Both of them use same "submit" function
const submit = (event) => {
event.preventDefault();
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ test: 'some message' })
};
fetch(`neededitems`, requestOptions)
.then(async response => {
console.log(response);
})
.catch(error => {
console.error('There was an error!', error);
});
}
When I click button outside form everything works fine ,
When I click submit button inside form I got an error .
答案1
得分: 1
将属性method="post"添加到<form>元素。
英文:
Add the attribute method="post" to the <form> element.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论