react编写的登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:react编写的登录表单效果代码,采用多个组件 main content header footer等自定义组件。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #app { display: flex; } #app > div { display: flex; flex: 1; flex-direction: column; width: 350px; align-items: center; justify-content: center; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script> class Header extends React.Component { constructor(props) { super(props); } render() { return /*#__PURE__*/( React.createElement("div", null, /*#__PURE__*/ React.createElement("h1", null, this.props.text))); }} class Footer extends React.Component { constructor(props) { super(props); } render() { return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, this.props.text)); }} class Input extends React.Component { constructor(props) { super(props); this.state = { inputVal: "" }; this.changeHandler = this.changeHandler.bind(this); } changeHandler(e) { this.props.parentFunction(e.target.value); } render() { return /*#__PURE__*/( React.createElement("div", null, /*#__PURE__*/ React.createElement("label", null, this.props.labelName), /*#__PURE__*/ React.createElement("input", { type: this.props.inputType, id: this.props.id, onChange: this.changeHandler }))); }} class LoginForm extends React.Component { constructor(props) { super(props); this.state = { username: "", .........完整代码请登录后点击上方下载按钮下载查看
网友评论0