Javascript 为什么我的React应用程序上不显示警报？

我是一个新的反应者，我已经做了一个表单，我想在点击提交按钮时发出警报。当我通过本地文件在浏览器上打开它时，它工作了，但在GitHub上看到时，我没有得到相同的结果，不知道为什么。我保存它并将其推送到存储库。 这是它的样子

下面是Form.js文件的代码：

import React from "react";
import "./Form.css";

export default class Form extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    userName: "",
    email: "",
    password: ""
  };

 onSubmit = e => {
    alert("Your information has been uploaded");
    e.preventDefault();
    this.props.onSubmit(this.state);
    this.setState({
      firstName: "",
      lastName: "",
      userName: "",
      email: "",
      password: ""
    });
  };
  render() {
    return (
      <div className="formcontainer">
        <form className="Form">
          <p className="register">CREATE ACCOUNT</p>
          <input
            className="input"
            name="firstName"
            placeholder="First name"
            value={this.state.firstName}
            onChange={e => this.change(e)}
          />
          <br />
          <input
            className="input"
            name="lastName"
            placeholder="Last name"
            value={this.state.lastName}
            onChange={e => this.change(e)}
          />
          <br />
          <input
            className="input"
            name="username"
            placeholder="Username"
            value={this.state.username}
            onChange={e => this.change(e)}
          />
          <br />
          <input
            className="input"
            name="email"
            placeholder="Email"
            value={this.state.email}
            onChange={e => this.change(e)}
          />
          <br />
          <input
            className="input"
            name="password"
            type="password"
            placeholder="Password"
            value={this.state.password}
            onChange={e => this.change(e)}
          />
          <br />
          <button className="submit" onClick={e => this.onSubmit(e)}>
            Submit
          </button>
        </form>
      </div>
);
  }
}

从“React”导入React；
导入“/Form.css”；
导出默认类表单扩展React.Component{
状态={
名字：“，
姓氏：“，
用户名：“”，
电邮：“，
密码：“
};
onSubmit=e=>{
警报（“您的信息已上载”）；
e、 预防默认值（）；
this.props.onSubmit（this.state）；
这是我的国家({
名字：“，
姓氏：“，
用户名：“”，
电邮：“，
密码：“
});
};
render（）{
返回(
创建帐户

这个。更改（e）}
/>


这个。更改（e）}
/>


这个。更改（e）}
/>


这个。更改（e）}
/>


这个。更改（e）}
/>


此.onSubmit（e）}>
提交
);
}
}

如果您检查该URL上的

Form.js

文件，您将看到以下内容：

onSubmit = e => {
  e.preventDefault();

  this.props.onSubmit(this.state);

  this.setState({
    firstName: "",
    lastName: "",
    userName: "",
    email: "",
    password: ""
  });
};

因此，看起来您在该URL上部署的内容与您在此处发布的内容不一样。您可能已将一些新代码推送到repo，但如果更改没有出现在该URL上，则可能忘记再次部署它们，或者部署管道可能由于某种原因失败

这里的代码缺少一些位，比如

onChange

回调，但将它们添加回去效果很好：

const-App=（）=>{
常量[状态，设置状态]=React.useState({
名字：''，
姓氏：“”，
用户名：“”，
电子邮件：“”，
密码：“”，
});
const handleSubmit=React.useCallback（（e）=>{
警报（'您的信息已上载'）；
e、 预防默认值（）；
设定状态({
名字：''，
姓氏：“”，
用户名：“”，
电子邮件：“”，
密码：“”，
});
}, []);
const handleChange=React.useCallback（{target}）=>{
setState（（prevState）=>（{…prevState[target.name]：target.value}）；
}, []);
返回(
创建帐户

提交
);
}
ReactDOM.render（，document.querySelector（'#app'）
正文{
字体系列：monospace；
}
.输入，
.提交{
显示：块；
边缘底部：8px；
字体系列：monospace；
填充：8px；
背景：白色；
边框：2件纯黑；
}
我认为您的代码中存在一些问题

       <input
        className="input"
        name="username"
        placeholder="Username"
        value={this.state.username}
        onChange={()=>this.change(e)}
      />

请确保在对repo进行任何更改后，始终通过运行
npm run deploy
再次部署代码，源代码中链接的脚本均不包含
警报。不确定你所说的“代码进入大脑”是什么意思，那不是真的，无论如何也不会起作用。HTML完全位于它所属的
内部。
里面的任何东西都是看不见的。没错，为什么会奇怪地出现在页面顶部？这是HTML的默认行为：它会根据需要增长到适合所有内容的高度。如果您希望表单垂直居中于页面中心，则需要特别告诉浏览器通过CSS来实现这一点：这非常有效！非常感谢你的帮助。顺便问一下，你知道为什么它会出现在页面顶部吗？这是我可以用css更改的吗？我认为您缺少
最小高度：100vh
，
显示：flex
和
将项目对齐：居中
到您的
.App
选择器中。
 change = e => {
this.setState({
  [e.target.name]: e.target.value //you are passing [e.target.name]
});};