错误:由于表单未连接，表单提交被取消，React.js

Question

我是React.js的新手，我正在编写我的第一个练习应用程序，我在一个表单中发现了这个错误：

export default function PanelAdd(props) {
const [getTitle, setTitle] = useState('');
const [getImage, setImage]= useState('');
const [getRating, setRating] = useState('');
const onsubmit = () => {
props.onadd({
title: getTitle, 
image: getImage,
rating: getRating
}); 
props.oncancel();
}
//functions changes
const onChangeTitle = (e) => {
setTitle(e.target.value);
}
const onChangeImage = (e) => {
setImage(e.target.value);
}
const onChangeRating = (e) => {
setRating(parseInt(e.target.value));
}
return (
<div className="new-item-panel-container">
<div className="new-item-panel">
<form onSubmit={onsubmit}>
<p>
<label>Titulo del libro</label><br/>
<input type="text" name="title" className="input" onChange={onChangeTitle}/>
</p>
<p>
<label>Nombre de imagen</label><br/>
<input type="text" name="image" className="input" onChange={onChangeImage} />
</p>
<p>
<label>Clasificación</label><br/>
<select onChange={onChangeRating}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<input type="submit" className="button btn-blue" value="Registrar libro"/>
<input type="button" className="button btn-normal" onClick={props.oncancel} value="Cancelar"/>
</form>
</div>
</div>
);
}

按下提交按钮会导致错误。我认为这个错误是因为html在提交之前加载的，但我不太清楚为什么会出现错误。

我也尝试过在oncancel和onsubmit函数中使用e.preventDefault();，但都不起作用。

我已经检查了其他问题，但它对我不起作用。

Answer 1

您可以在onsubmit处理程序中调用preventDefault：

const onsubmit = (e) => {
e.preventDefault();
props.onadd({
title: getTitle, 
image: getImage,
rating: getRating
}); 
}