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.com. </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);

Dies ist meine Anmeldeseite, auf der ich eine Kopfzeile hinzufügen möchte. Ich habe sie bereits wie im Code gezeigt hinzugefügt. Nach dem Ausführen tritt jedoch leider ein Fehler auf. Wo füge ich meine Kopf- und Fußzeile in meinen Code ein? Wenn Wir fügen es in das Formular ein, in dem der Code ausgeführt wird. Aber das auf das Formular angewendete CSS wird durch Hinzufügen der Fußzeile und der Kopfzeile beeinflusst. Ich brauche also die richtige Methode, um die Kopf- und Fußzeile zu platzieren, ohne mein Formular zu beeinträchtigen.

4
Leya Varghese 18 Apr. 2018 im 07:51

3 Antworten

Beste Antwort

Das Problem ist, dass die return-Anweisung nur ein einzelnes Element enthalten darf und Ihr Code drei enthält. Im Grunde sollte dies funktionieren:

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.com. </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);
2
Evaldas Buinauskas 18 Apr. 2018 im 05:10

Wenn Sie das Wrapper-Div nicht benötigen, können Sie die Fragmente (https://reactjs.org/docs/fragments.html) bei Verwendung von React Fibre.

<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.com. </footer>
</React.Fragment>
0
Sumit Parkash 18 Apr. 2018 im 05:32

Sie benötigen einen Wrapper in Ihrer Renderfunktion. Diese Lösung sollte Ihr Problem beheben: -

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.com. </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);
0
Shubham 18 Apr. 2018 im 05:04