Javascript 为什么onSubmit在表单元素中传递表单时不提交表单。但当我在React中的button元素中传递它时，它确实提交了

我有个问题。顺便说一句，我是用React写的。因此，当我在表单元素中传递onSubmit处理程序时，当我单击“addtodo”时，它不会提交表单。但是，当我将处理程序传递到button元素时，它会提交表单吗？请参阅下面的代码。我已包括嵌套在表单中的子组件文件，以防：

// TodoForm,js
import React from "react";
import PrioritySelector from "./PrioritySelector";
import { connect } from "react-redux";

class TodoForm extends React.Component {


    state = {
        priorityLevel: null
    }

    /*submit handler to grab input from the input references and store them
    in the "todoData" object. Then dispatches an action type and payload
    capturing the data. Then clears the input*/
    handleSubmit=( e )=> {
       e.preventDefault()
        const todoTitle = this.getTodoTitle.value;
        const description = this.getDescription.value;
        const priorityLevel = this.state.priorityLevel;
        const todoData = {
            id: Math.floor(Math.random()*1000),
            todoTitle,
            description,
            priorityLevel,
            editing: false
        }
        this.props.dispatch({type:"ADD_TODO", todoData })
        this.getTodoTitle.value = "";
        this.getDescription.value = "";

    }


    getData=(priorityLevels)=> {
        const data = priorityLevels;
        this.setState({
            priorityLevel: data
        })
    }

    render() {
        return(
            <div>
                <form>
                    <input type="text" ref={(input)=> this.getTodoTitle=input} placeholder="Enter Todo" required/>
                    <input type="text" ref={(input)=> this.getDescription=input} placeholder="Enter Description" required/>
                    <PrioritySelector getData={this.getData} />
                    <button onClick={this.handleSubmit} type="button">Add Todo</button>
                </form>
            </div>
        )
    }
}

export default connect()(TodoForm);



// PrioritySelecter.js
import React from "react";
import $ from "jquery";
import { connect } from "react-redux";

class PrioritySelector extends React.Component  {


    componentDidMount() {
        $("#selector").show();
    }

    handleSelect =(e)=> {
       const priorityLevel = this.getPriorityLevel.value;
       this.props.getData(priorityLevel);
       console.log(priorityLevel)
    }

    render() {
        return(
            <div>
                <div className="input-field col s12">
                    <select onChange={this.handleSelect} ref={(option)=> this.getPriorityLevel = option} id="selector">
                        <option disabled defaultValue>Choose your option</option>
                        <option value="1">Low</option>
                        <option value="2">Medium</option>
                        <option value="3">High</option>
                    </select>
                </div>
            </div>
        )
    }

}


const mapStateToProps=(state)=> {
    return {
        priorityLevel: state
    }
}


export default connect(mapStateToProps)(PrioritySelector);

//TodoForm，js
从“React”导入React；
从“/PrioritySelector”导入PrioritySelector；
从“react redux”导入{connect}；
类TodoForm扩展了React.Component{
状态={
priorityLevel:null
}
/*提交处理程序以从输入引用获取输入并存储它们
在“todoData”对象中。然后分派操作类型和有效负载
捕获数据。然后清除输入*/
handleSubmit=（e）=>{
e、 预防默认值（）
const todoTitle=this.getTodoTitle.value；
const description=this.getDescription.value；
const priorityLevel=this.state.priorityLevel；
常数todoData={
id:Math.floor（Math.random（）*1000），
托多蒂，
描述
priorityLevel，
编辑：假
}
this.props.dispatch（{type:“ADD_TODO”，todoData}）
this.getTodoTitle.value=“”；
this.getDescription.value=“”；
}
getData=（优先级）=>{
常量数据=优先级别；
这是我的国家({
优先级别：数据
})
}
render（）{
返回(
this.getTodoTitle=input}placeholder=“Enter Todo”必填项/>
this.getDescription=input}占位符=“输入描述”必填项/>
添加待办事项
)
}
}
导出默认连接（）（TodoForm）；
//priorityselector.js
从“React”导入React；
从“jquery”导入$；
从“react redux”导入{connect}；
类优先级选择器扩展了React.Component{
componentDidMount（）{
$（“#选择器”）.show（）；
}
handleSelect=（e）=>{
const priorityLevel=this.getPriorityLevel.value；
this.props.getData（priorityLevel）；
控制台日志（priorityLevel）
}
render（）{
返回(
this.getPriorityLevel=option}id=“selector”>
选择你的选择
低
中等
高
)
}
}
常量mapStateToProps=（状态）=>{
返回{
优先级别：状态
}
}
导出默认连接（MapStateTops）（优先级选择器）；

您的按钮是type=“button”，因此它不会提交表单。 将其更改为type=“submit”并将处理程序放在表单上。

您的按钮是type=“button”，因此它不会提交表单。

---

将其更改为type=“submit”，并将处理程序放在表单上。

谢谢！那是汉克斯！就这样