javascript - where to put my header and footer tags in reactjs - Stack Overflow

admin管理员组

文章数量:1324979

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';



class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
          <header>
   <h1>Company Login</h1>
   </header>

      <form name="loginForm" onSubmit={this.onSubmit}>




        <div className="form-group-collection">
          <div className="form-group">

            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>


          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>
        <br/>

        <input type="submit" value="Login" />

  </form>
       <footer>Copyright &copy; multihands. </footer>
    )
  }






  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

This is my login page i want to add header in my page.. I added it already as shown in the code...But unfortunetly error occurs after running.. Where does I put my header and footer tag in my code.. If we put it in form the code runs..But the css applied to the form is affected by adding the footer and header.. So I need the correct way to place header and footer without intrude my form..

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';



class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
          <header>
   <h1>Company Login</h1>
   </header>

      <form name="loginForm" onSubmit={this.onSubmit}>




        <div className="form-group-collection">
          <div className="form-group">

            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>


          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>
        <br/>

        <input type="submit" value="Login" />

  </form>
       <footer>Copyright &copy; multihands.. </footer>
    )
  }






  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

This is my login page i want to add header in my page.. I added it already as shown in the code...But unfortunetly error occurs after running.. Where does I put my header and footer tag in my code.. If we put it in form the code runs..But the css applied to the form is affected by adding the footer and header.. So I need the correct way to place header and footer without intrude my form..

• javascript
• reactjs
• redux-form

Share Follow edited Apr 18, 2018 at 4:55 Evaldas Buinauskas 14.1k1111 gold badges6161 silver badges118118 bronze badges asked Apr 18, 2018 at 4:51 Lex VLex V 1,44744 gold badges2121 silver badges3737 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Issue is that return statement must contain a single element only and your code contains three. So basically this should work:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let { username, password } = this.state;
    let { isLoginPending, isLoginSuccess, loginError } = this.props;

    return (
      <div>
        <header>
          <h1>Company Login</h1>
        </header>

        <form name="loginForm" onSubmit={this.onSubmit}>
          <div className="form-group-collection">
            <div className="form-group">

              <label>Username/User ID:</label>
              <input name="username" onChange={e => this.setState({ username: e.target.value })} value={username} />
            </div>

            <div className="form-group">
              <label>Password:</label>
              <input type="password" name="password" onChange={e => this.setState({ password: e.target.value })} value={password} />
            </div>
          </div>
          <br />

          <input type="submit" value="Login" />

        </form>
        <footer>Copyright &copy; multihands.. </footer>
      </div>
    )
  }

  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}

const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

You need a wrapper inside your render function this solution should reolve your issue:-

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';

class LoginForm extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.onSubmit = this.onSubmit.bind(this);
    }

    render() {
        let { username, password } = this.state;
        let { isLoginPending, isLoginSuccess, loginError } = this.props;

        return (
            <div className="wrapper">
                <header>
                    <h1>Company Login</h1>
                </header>

                <form name="loginForm" onSubmit={this.onSubmit}>
                    <div className="form-group-collection">
                        <div className="form-group">

                            <label>Username/User ID:</label>
                            <input name="username" onChange={e => this.setState({ username: e.target.value })} value={username} />
                        </div>


                        <div className="form-group">
                            <label>Password:</label>
                            <input type="password" name="password" onChange={e => this.setState({ password: e.target.value })} value={password} />
                        </div>
                    </div>
                    <br />
                    <input type="submit" value="Login" />
                </form>
                <footer>Copyright &copy; multihands.. </footer>
            </div>
        );

        onSubmit(e) {
            e.preventDefault();
            let { username, password } = this.state;
            this.props.login(username, password);
            this.setState({
                username: '',
                password: ''
            });
        }

    }
}

const mapStateToProps = (state) => {
    return {
        isLoginPending: state.isLoginPending,
        isLoginSuccess: state.isLoginSuccess,
        loginError: state.loginError
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        login: (username, password) => dispatch(login(username, password))
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

If you don't need the wrapper div you can use the Fragments(https://reactjs/docs/fragments.html) if using React Fiber.

<React.Fragment>
  <header>
      <h1>Company Login</h1>
    </header>

    <form name="loginForm" onSubmit={this.onSubmit}>
      <div className="form-group-collection">
        <div className="form-group">

          <label>Username/User ID:</label>
          <input name="username" onChange={e => this.setState({ username: e.target.value })} value={username} />
        </div>

        <div className="form-group">
          <label>Password:</label>
          <input type="password" name="password" onChange={e => this.setState({ password: e.target.value })} value={password} />
        </div>
      </div>
      <br />

      <input type="submit" value="Login" />

    </form>
    <footer>Copyright &copy; multihands.. </footer>
</React.Fragment>

本文标签： javascriptwhere to put my header and footer tags in reactjsStack Overflow