Javascript 对于onSubmit（）和onChange（），事件返回为未定义，对于submit类型表单返回为未定义

我正在尝试实现一个基本的提交表单，用户在其中输入所需的文本，点击enter或按下submit按钮，文本框中的值就会被提交。这里是我的父组件的样子，我将处理程序函数作为道具传递给子组件

<Toolbar
    drawerClickHandler={() => handleClickSideDrawer(isDisplaySideDrawer)}
    value={searchText}
    onChange={handleSearchChange}
    onSubmit={handleSearchSubmit}
  />

---

在测试框中的change event上，事件变量未定义。我的理解是，事件是一个由react触发的合成事件，当我将处理程序函数作为道具传递给子组件时，我不需要为它传递任何值。我缺少什么？我从react官方文档中获取了表单创建的参考资料：

尝试更改

handleSearchSubmit

中语句的顺序。在alert语句之前使用e.preventDefault（）。不知道这是否有帮助，在react的官方文档中，他们使用的顺序相同：[CodePen link]（）。我能看到的唯一区别是他们有类组件，但我使用的是函数组件。

const toolbar = (props) => {
return (
    <header className={styles.toolbar}>
        <nav className={styles.toolbar_navigation}>
            <div className={styles.spacer}>
                <form className={styles.form} onSubmit={props.onSubmit}>
                    <label className={styles.form_search_input}>
                        <input
                            className={styles.form_search_input_text}
                            type="text"
                            value={props.value}
                            onChange={props.onChange}
                        />
                    </label>
                    <input type="submit" value="Search" />
                </form>
            </div>
        </nav>
    </header>
);

const handleSearchChange = (event) => {
setSearchText(event.target.value);}

const handleSearchSubmit = (event) => {
alert('A name was submitted: ' + searchText);
event.preventDefault();}