[英]Why 'this' is undefined for child component, when click is passed from a parent component?
Trying to educate in React.尝试在 React 中进行教育。 It might be the case, that the whole structure is wrong however, this is it:可能是这样,整个结构是错误的,但是,就是这样:
LoginComponent contains LoginForm, and passes onSubmit event down to the form. LoginComponent 包含 LoginForm,并将 onSubmit 事件向下传递到表单。 The submitForm triggers an actionCreator, that is why I have to use this.props.login
. submitForm 触发 actionCreator,这就是我必须使用this.props.login
。 But when the call is happening this
is undefined
.但是当调用发生时, this
是undefined
。 I'm doing this, since LoginComponent will become an Auth component and contain the registration form as well.我这样做是因为 LoginComponent 将成为一个 Auth 组件并包含注册表单。 But is it correct in general?但总的来说它是正确的吗?
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;
The function is not having this
access we have to explicitly bind this
to function or we can use arrow function.该功能是没有this
访问,我们必须明确地绑定this
以功能或者我们可以使用箭头功能。
submitForm = (username, password) => {
this.props.login(username, password);
}
Bind keep this in your constructor : Bind将此保留在您的构造函数中:
this.submitForm = this.submitForm.bind(this)
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};
and Login.jsx :和 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.