Question

尝试在React中进行教育。可能是这样，整个结构是错误的，只是这样：

LoginComponent包含LoginForm，并将onSubmit事件传递到表单。 SubmitForm会触发一个actionCreator，这就是为什么我必须使用this.props.login的原因。但是当通话发生时，this是undefined。我正在执行此操作，因为LoginComponent将成为Auth组件，并且还包含注册表格。但是总的来说是正确的吗？

import React from 'react';
import {connect} from "react-redux";
import {userActions} from "../../actions/auth.actions";
import LoginForm from "./loginForm";

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: ''
        }
    }

    submitForm(username, password) {
        this.props.login(username, password);
    }

    render() {
        return (
            <>
                <LoginForm onSubmit={this.submitForm}/>
            </>
        );
    }
}

const mapStateProps = state => {
    const {isLoggedIn, isLoggingIn, user} = state;
    return {isLoggedIn, isLoggingIn, user};
};

const actionCreators = {
    login: userActions.login,
};

const connectedLoginComponent = connect(mapStateProps, actionCreators)(LoginComponent);
export {connectedLoginComponent as Login};

LoginForm：

import React, {useState} from 'react';
import PropTypes from 'prop-types';

const LoginForm = (props) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const { onSubmit } = props;

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(username, password);
    };

    return (
        <>
            <form onSubmit={e => handleSubmit(e)}>
                <input
                    onChange={e => setUsername(e.target.value)}
                    value={username}
                    name={"username"}
                    type="text"
                    placeholder={'Username'}
                    required
                />
                <input
                    onChange={e => setPassword(e.target.value)}
                    value={password}
                    name={"password"}
                    type="text"
                    placeholder={'Password'}
                    required
                />
                <button>Login</button>
            </form>
        </>
    );
};

LoginForm.propTypes = {
    onSubmit: PropTypes.func,
};

export default LoginForm;

Answer 1

该函数没有this访问权限，我们必须将this明确绑定到该函数，或者我们可以使用箭头函数。

Arrow function：

 submitForm = (username, password) => {
    this.props.login(username, password);
  }

Bind将此保留在您的构造函数中：

this.submitForm = this.submitForm.bind(this)

Answer 2

import React from 'react';
import {connect} from "react-redux";
import {userActions} from "../../actions/auth.actions";
import LoginForm from "./loginForm";

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: ''
        }
    }

    submitForm =(username, password) => this.props.login(username, password);

    render() {
        return (
            <>
                <LoginForm onSubmit={this.submitForm}/>
            </>
        );
    }
}

const mapStateProps = state => {
    const {isLoggedIn, isLoggingIn, user} = state;
    return {isLoggedIn, isLoggingIn, user};
};

const actionCreators = {
    login: userActions.login,
};

const connectedLoginComponent = connect(mapStateProps, actionCreators)(LoginComponent);
export {connectedLoginComponent as Login};

和Login.jsx：

import React, {useState} from 'react';
import PropTypes from 'prop-types';

const LoginForm = ({onSubmit}) => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(username, password);
    };

    return (
        <>
            <form onSubmit={e => handleSubmit(e)}>
                <input
                    onChange={e => setUsername(e.target.value)}
                    value={username}
                    name={"username"}
                    type="text"
                    placeholder={'Username'}
                    required
                />
                <input
                    onChange={e => setPassword(e.target.value)}
                    value={password}
                    name={"password"}
                    type="text"
                    placeholder={'Password'}
                    required
                />
                <button>Login</button>
            </form>
        </>
    );
};

LoginForm.propTypes = {
    onSubmit: PropTypes.func,
};

export default LoginForm;

当从父组件传递点击时，为什么未为子组件定义“ this”？

2 个答案: