javascript - ReactJS表单提交防止默认不起作用
问题描述
我正在学习 React JS,同时遵循在线教程。下面的代码停止工作并给我一个异常“TypeError:无法读取未定义的属性'PreventDefault'”。有人可以帮我理解造成这种情况的原因吗?提前致谢。
const Card = (props)=>{
return(
<div style={{margin:'1em'}}>
<img width ="75" src ={props.avatar_url}/>
<div style={{display: 'inline-block', marginLeft: 10}}>
<div style ={{fontSize:'1.25em', fontWeight: 'bold'}}>
{props.name}
</div>
<div>{props.company}</div>
</div>
</div>
);
};
const CardList = (props) => {
return (
<div>
{props.cards.map(card => <Card {...card} />)}
</div>
);
}
class Form extends React.Component {
handleSubmit = (e) => {
e.PreventDefault();
console.log('Event: Form Submit');
};
render() {
return (
<form onSubmit={this.handleSubmit()}>
<input type ="text" placeholder ="Github username"/>
<button type ="submit">Add Card</button>
</form>
);
}
}
class App extends React.Component {
state = {
cards: [
{ name : "Paul O’Shannessy" , avatar_url: "https://avatars1.githubusercontent.com/u/8445?v=4", company: "Facebook" },
{ name : "Ben Alpert" , avatar_url: "https://avatars1.githubusercontent.com/u/6820?v=4",company: "Facebook" },
]
}
render() {
return(
<div>
<Form />
<CardList cards={this.state.cards} />
</div>
);
}
}
ReactDOM.render(<App />,mountNode)
解决方案
这里有两个小问题。第一个,不是PreventDefault
,是preventDefault
。那么这里:
<form onSubmit={this.handleSubmit()}>
您不是在使用回调函数,而是在调用真正的函数。如果不使用回调,则无法获取e
. 此外,如果您像上面那样使用它,它会在第一次渲染时触发,但不会在提交时再次触发。
<form onSubmit={() => this.handleSubmit()}>
但是,您不需要也不应该像这样使用它。如果你这样使用它,回调函数将在每次渲染中重新创建。只需使用函数的引用。你也可以得到e
这个。
<form onSubmit={this.handleSubmit}>
最后一件事,使用 akey
作为你Card
的地图。
{props.cards.map( card => <Card key={card.name} {...card} /> )}
哦,也许最后一件事 :) 如果您当前不使用它,请使用 linter。
推荐阅读
- excel - 使用 VBA 文件保存保留打印设置
- javascript - 在两个不同的屏幕上垂直滚动
- sql - SQL Server (2008) UNION 与 ROLL UP
- php - 如何将PC上生成的数据获取到Web服务器
- mysql - 如何在插入语句mysql中使用join
- raspberry-pi3 - 我的树莓派的文本界面似乎坏了
- c# - 放置请求期间的 ASP Net Core CORS 错误
- vb.net - ASPX 脚本中用户定义的命名空间在服务器上运行
- swift - 如何测试 Equatable 的类型(不是实例)?
- python - Python Schematics - 具有多种值类型的字典类型