preventDefault（）不起作用，页面继续重新加载

Question

在React中工作我将一个表单组件加载到一个主要组件中。道具从主要组件传递到表单。 handleInput函数正在运行，但是在提交表单时将重新加载页面。 “ event.preventDefault”在我的提交功能中。

  handleInputChange = event => {
    const { name, value } = event.target;
    
    if (event.target.type === "checkbox") {
      if (!this.state[name]) {
        this.setState({
          [name]: value
        });
      } else {
        this.setState({
          [name]: ''
        });
      }
    } else {
      this.setState({
        [name]: value
      });
    }
  };

  handleFoodFormSubmit = event => {
    event.preventDefault(); 
    console.log("submitted")
  }

-我的表单具有三个复选框和两个单个下拉选择。

在表单组件中显示功能

  render(props) {
    return (
      <Wrapper>
        <Container>
        <form className="mt-4" onSubmit={this.props.handleFoodFormSubmit}>

我也尝试过

  handleFoodFormSubmit = event => {
    event.preventDefault(); 
    event.stopPropagation();
    console.log("submitted")
  }

谢谢您的建议。