当我将表单移动到其他文件时，此句柄提交()不起作用

Question

我正在按照 React 上的 Scrimba 教程进行操作，但我决定将我的表单移动到一个新的文件/组件并将函数更改为 ES6。

有人可以告诉我为什么吗？谢谢！

现在句柄提交不起作用(当表单在模因生成器中呈现时它有效(，但我不知道为什么，它不会抛出任何错误。

import React, { Component } from 'react'
import Form from "./Form"

 class MemeGenerator extends Component {
constructor() {
    super() 
    this.state = {
        topText: "",
        bottomText: "",
        randomImg: "http://i.imgflip.com/1bij.jpg",
        allMemeImgs: []
    }
}
componentDidMount() {
fetch("https://api.imgflip.com/get_memes").then(response => response.json())
.then(response => {
    const {memes} =response.data
    console.log(memes[2])
    this.setState({allMemeImgs: memes})
})
}
handleChange = (event) => {
    const {name, value} = event.target
    this.setState({[name]: value})
}
handleSubmit = (event) => {
    event.preventDefault()
    const randNum = Math.floor(Math.random() * 
this.state.allMemeImgs.length)
    const randMemeImg = this.state.allMemeImgs[randNum].url
    this.setState({ randomImg: randMemeImg})
}
render() {
    return (
        <Form 
        handleChange = {this.handleChange}
        data={this.state}
        onSubmit={this.handleSubmit}
        />
    )
}
}
export default MemeGenerator

每次单击按钮时，图像都应该更新为随机图像。但它没有，整个页面也会重新加载，忽略事件阻止默认

import React from 'react'
import style from './styles.module.css'
function Form(props) {
return (
    <div>
        <form className={style.memeForm} onSubmit={props.handleSubmit}>
            <input 
            type="text"
            placeholder="Type your top text"
            name="topText"
            value={props.data.topText}
            onChange={props.handleChange}
            />
            <input 
            type="text"
            placeholder="Type your bottom text"
            name="bottomText"
            value={props.data.bottomText}
            onChange={props.handleChange}
            />
            <button>Generate</button>
        </form>
            <div className={style.meme}>        
            <img src={props.data.randomImg} alt="" />
            <h2 className={style.top}>{props.data.topText}</h2>
            <h2 className={style.bottom}>{props.data.bottomText}</h2>
            </div>
    </div>
)
}
export default Form

Answer 1

更改这些代码行

onSubmit={(event) => props.handleSubmit(event)}

和

<button type='submit'>Generate</button>

<form className={style.memeForm} onSubmit={(event) => props.handleSubmit(event)}>
  <input
    type='text'
    placeholder='Type your top text'
    name='topText'
    value={props.data.topText}
    onChange={props.handleChange}
  />
  <input
    type='text'
    placeholder='Type your bottom text'
    name='bottomText'
    value={props.data.bottomText}
    onChange={props.handleChange}
  />
  <button type='submit'>Generate</button>
</form>;