Question

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);

这是我的登录页面我想在我的页面中添加标题..我已经添加了它，如代码中所示...但运行后出现了不幸的错误..我在我的代码中将我的页眉和页脚标记放在哪里..如果我们把它放在形式代码运行..但是应用于表单的CSS受到添加页脚和标题的影响..所以我需要正确的方法来放置页眉和页脚而不会侵入我的表单..

Answer 1

问题是return语句必须只包含一个元素，而你的代码包含三个元素。所以基本上这应该有效：

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);

Answer 2

你需要在渲染函数中使用一个包装器，这个解决方案应该解决你的问题： -

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);

Answer 3

如果您不需要包装div，则可以使用replace（Fragments），如果使用React Fiber。

{{1}}

将我的页眉和页脚标签放在reactjs中的位置

3 个答案: