<div>
<button style={{width: "100%"}} className="pt-button pt-intent-primary" onClick="{() => { this.authWithFacebook() }}">Log In with Facebook</button>
<hr style={{marginTop: "10px", marginBottom: "10px"}}>
<form onSubmit={(event) => { this.authWithEmailPassword(event) }} ref={(form) => { this.loginForm = form }}>
<div style={{marginBottom: "10px"}} className="pt-callout pt-icon-info-sign">
<h5>Note</h5>
If you dont have an account already, this will create you one!
</div>
<label className="pt-label">
Email
<input style={{width: "100%"}} className="pt-input" name="email" type="email" ref={(input) => {this.emailInput = input}} placeholder="Email"></input>
Password
<input style={{width: "100%"}} className="pt-input" name="password" type="password" ref={(input) => {this.passwordInput = input}} placeholder="Password"></input>
</label>
<input style={{width: "100%"}} type="submit" className="pt-button pt-intent-primary" value="Log In"></input>
</form>
</div>
错误讯息:
Syntax error: D:/xxxx/xxxx/xxxx/webWorker/webworker/src/components/Login.js: Unterminated JSX contents (39:14)
我不知道是什么问题,似乎没关系,但我无法运行它。谢谢你的帮助。
答案 0 :(得分:1)
主要是关闭<hr>
标签。更好的做法是自动关闭<input>
标签,如<input type="text" />
。
作为奖励,我将<label>
标记分隔到每个输入字段,只要您点击字段标签,它就会聚焦右侧输入字段。
在继续之前,我建议您阅读这两个jsx指南:introduction,advanced。
修改后的代码:
<div>
<button style={{width: "100%"}} className="pt-button pt-intent-primary" onClick="{() => { this.authWithFacebook() }}">Log In with Facebook</button>
<hr style={{marginTop: "10px", marginBottom: "10px"}} />
<form onSubmit={(event) => { this.authWithEmailPassword(event) }} ref={(form) => { this.loginForm = form }}>
<div style={{marginBottom: "10px"}} className="pt-callout pt-icon-info-sign">
<h5>Note</h5>
If you dont have an account already, this will create you one!
</div>
<label className="pt-label">
Email
<input style={{width: "100%"}} className="pt-input" name="email" type="email" ref={(input) => {this.emailInput = input}} placeholder="Email"/>
</label>
<label className="pt-label">
Password
<input style={{width: "100%"}} className="pt-input" name="password" type="password" ref={(input) => {this.passwordInput = input}} placeholder="Password"/>
</label>
<input style={{width: "100%"}} type="submit" className="pt-button pt-intent-primary" value="Log In"/>
</form>
</div>
答案 1 :(得分:0)
尝试关闭<hr />
代码,您也可以关闭输入代码<input />
,因为他们也没有内容。