javascript - 错误：表单提交因表单未连接而取消，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，但我不太清楚为什么会出现错误。

我也尝试过e.preventDefault();inoncancel和onsubmitfunction 但它不起作用。

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

标签： javascriptreactjsjsx

Answer 1

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

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