我使用Frontpage作为我的页面编辑器创建了一个页面，现在我想在我的React Js应用程序中使用这个相同的HTML页面。现在这是我所面临的。我试图以这种方式关闭标签</>，但我似乎对</table>和</tr>和内联CSS样式有一个错误。虽然其他代码似乎工作得很好，但仍然有一些东西在Vs代码中返回一些错误。
为什么会这样?我是不是漏掉了什么?
import './InstaClone.css';
import React from 'react';
const handleSubmit = (event) =>{
event.preventDefault();
alert('Hi from React JS');
}
const MainLogin = () =>{
return (
<form onSubmit={this.handleSubmit}>
<div align="center"/>
<table border="0" width="61%"/>
<tr/>
<td width="370">
<img border="0" src="images/43cc71bb1b43_2-removebg-preview.png" width="370" height="584"/></td>
<td bordercolorlight="#FFFFFF" bordercolordark="#C0C0C0">
</td>
<td bordercolorlight="#FFFFFF" bordercolordark="#C0C0C0" width="415"/>
<table border="0" width="100%" height="301" bordercolordark="#C0C0C0" bgcolor="#FFFFFF" bordercolorlight="#FFFFFF" cellpadding="0" className="loginContainer"/>
<tr>
<td bordercolorlight="#FFFFFF" bordercolordark="#C0C0C0" border="1" height="74">
<p align="center"/>
<img border="0" src="images/images-removebg-preview.png" width="168" height="70"/></td>
</tr>
<tr/>
<td height="46">
<p align="center"/>
<input type="text" name="T1" placeholder=" Phone number, username or email" size="33" className="inputBox"/></td>
<tr/>
<tr/>
<td height="49"/>
<p align="center"><input type="text" placeholder =" Password" name="T2" size="33" className="inputBox"/></p>
<tr/>
<tr>
<td height="43"/>
<p align="center">
<input type="submit" value="Login" name="B1" className="buttonLogin"/></p>
<p/>
<td/>
</tr>
<tr>
<td height="23"> </td>
</tr>
<tr>
<td>
<p align="center"><font face="Arial" size="2"/></p>
<a href="https://google.com">
Forgot Password?</a><font/></td>
</tr>
<table/>
<p> </p>
<table border="0" width="100%" bgcolor="#FFFFFF" height="48" className="donthaveAccount"/>
<tr>
<td>
<p align="center"><font face="Arial" size="2"/>Don't Have an
Account?
<a href="https://google.com">
Sign Up</a><font/></p></td>
</tr>
<table/>
<p align="center"><font face="Arial">Get the app</font></p>
<table border="0" width="100%"/>
<tr/>
<td width="204"/>
<p align="center"/>
<input type="image" src="images/appstore.png" width="169" height="51" align="right"/>
<td/>
<p align="center"/>
<input type="image" src="images/googlePlay.png" width="169" height="50" align="left"/>
<tr/>
<table/>
<p> </p>
<p/>
<tr/>
<table/>
<p/>
</form>
);
}
export default MainLogin;
和我收到的错误:
×
TypeError: Cannot read properties of undefined (reading 'handleSubmit')
MainLogin
D:/react/instagramc/src/MainLogin.js:12
9 |
10 | const MainLogin = () =>{
11 | return (
> 12 | <form onSubmit={this.handleSubmit}>
13 | <div align="center"/>
14 | <table border="0" width="61%"/>
15 | <tr/>
View compiled
▶ 17 stack frames were collapsed.
Module.<anonymous>
D:/react/instagramc/src/index.js:7
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
> 7 | ReactDOM.render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:1383:30
__webpack_require__
D:/react/instagramc/webpack/bootstrap:856
853 |
854 | __webpack_require__.$Refresh$.init();
855 | try {
> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 857 | } finally {
858 | __webpack_require__.$Refresh$.cleanup(moduleId);
859 | }
View compiled
fn
D:/react/instagramc/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1506:18
__webpack_require__
D:/react/instagramc/webpack/bootstrap:856
853 |
854 | __webpack_require__.$Refresh$.init();
855 | try {
> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 857 | } finally {
858 | __webpack_require__.$Refresh$.cleanup(moduleId);
859 | }
View compiled
checkDeferredModules
D:/react/instagramc/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
D:/react/instagramc/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:73
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
仔细查看您的代码。Td不是一个自闭元素，但有些部分你可以关闭它。另外，你不应该以这种方式使用样式，而是通过索引它们与你在css中使用的类。
例如:
<td className='my_td'></td>
然后在你的css
.my_td {width:24px;}
错误提示:未找到handleSubmit。您忘记在MainLogin组件中定义handleSubmit了。
要解决，将handleSubmit函数放在MainLogin组件:
const MainLogin = () => {
const handleSubmit = (event) =>{ // ----> moved to here
event.preventDefault();
alert('Hi from React JS');
}
return ( // rest of the codes )
}
最后，传递handleSubmit函数给onSubmit:
<form onSubmit={handleSubmit} >
this关键字在类组件定义中使用，在函数组件中不再需要结构。