我有这个免费组件:
我的登录表单:
import React, { Component } from "react";
import { Pane, TextInputField, Checkbox, Button } from "evergreen-ui";
import { validateEmail, validatePassword } from "./FormValidator";
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
passwordErr: {
status: false,
value: ""
},
emailErr: {
status: false,
value: ""
},
email: "",
password: "",
CheckBoxchecked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCheckbox = this.handleCheckbox.bind(this);
}
handleEmailInput = e => {
const email = e.target.value;
this.setState({ email: email });
};
handlePasswordInput = e => {
const password = e.target.value;
this.setState({ password: password });
};
handleCheckbox() {
this.setState({
CheckBoxchecked: !this.state.CheckBoxchecked
});
}
handleSubmit() {
if (this.checkFormStatus()) {
alert("Form OK");
}
}
checkFormStatus() {
// form validation middleware
const { email, password } = this.state;
const emailErr = validateEmail(email);
const passwordErr = validatePassword(password);
if (!emailErr.status && !passwordErr.status) {
return true;
} else {
this.setState({
emailErr,
passwordErr
});
return false;
}
}
render() {
return (
<Pane padding={15}>
<TextInputField
tabIndex={0}
required
isInvalid={this.state.emailErr.status}
validationMessage={
this.state.emailErr.status ? this.state.emailErr.value : false
}
onChange={this.handleEmailInput}
value={this.state.email}
appearance="neutral"
type="email"
label="Your email-address"
inputHeight={36}
//description="We’ll need your email-address to create an new account"
/>
<TextInputField
required
validationMessage={
this.state.passwordErr.status ? this.state.passwordErr.value : false
}
isInvalid={this.state.passwordErr.status}
onChange={this.handlePasswordInput}
value={this.state.password}
appearance="neutral"
label="Your Password"
type="password"
inputHeight={36}
//description="Create a secure password to protect your account"
/>
<Checkbox
label="Keep me logged in"
checked={this.state.CheckBoxchecked}
onChange={this.handleCheckbox}
/>
</Pane>
);
}
}
export default LoginForm;
我的导出 LoginFormButton:
export class LoginFormButton extends Component {
render() {
return (
<Button
appearance="primary"
marginLeft={8}
marginRight={16}
intent="success"
onClick={} //How can i call handleSubmit() from here?
>
Login
</Button>
);
}
}
还有我的对话...
import ReactDOM from "react-dom";
import LoginForm from './LoginForm';
import LoginFormButton from './LoginFormButton';
class LoginDialog extends Components {
render(
return(
<Dialog>
<LoginForm/>
<div className="Footer">
<LoginFormButton/>
</div>
</Dialog>
);
)
}
我将函数 handleSubmit()
存储在 LoginForm 组件中。我想从 LoginFormButton 调用这些函数。此按钮包含在对话框组件中:
我该怎么做?感谢您的回答和我们的帮助。我是初学者,所以我不太清楚,我该如何实现。
最佳答案
看起来,您想要一个 LoginForm 组件和一个 LoginFormButton 来处理表单提交。
import React, { Component } from "react";
import { Pane, TextInputField, Checkbox, Button } from "evergreen-ui";
import { validateEmail, validatePassword } from "./FormValidator";
const LoginFormButton = ({ handleSubmit }) => {
return (
<Button
appearance="primary"
marginLeft={8}
marginRight={16}
intent="success"
onClick={() => handleSubmit()} // or just -> onClick={handleSubmit}
>
Login
</Button>
);
}
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
passwordErr: {
status: false,
value: ""
},
emailErr: {
status: false,
value: ""
},
email: "",
password: "",
CheckBoxchecked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCheckbox = this.handleCheckbox.bind(this);
}
handleEmailInput = e => {
const email = e.target.value;
this.setState({ email: email });
};
handlePasswordInput = e => {
const password = e.target.value;
this.setState({ password: password });
};
handleCheckbox() {
this.setState({
CheckBoxchecked: !this.state.CheckBoxchecked
});
}
handleSubmit() {
if (this.checkFormStatus()) {
alert("Form OK");
}
}
checkFormStatus() {
// form validation middleware
const { email, password } = this.state;
const emailErr = validateEmail(email);
const passwordErr = validatePassword(password);
if (!emailErr.status && !passwordErr.status) {
return true;
} else {
this.setState({
emailErr,
passwordErr
});
return false;
}
}
render() {
return (
<Pane padding={15}>
<TextInputField
tabIndex={0}
required
isInvalid={this.state.emailErr.status}
validationMessage={
this.state.emailErr.status ? this.state.emailErr.value : false
}
onChange={this.handleEmailInput}
value={this.state.email}
appearance="neutral"
type="email"
label="Your email-address"
inputHeight={36}
//description="We’ll need your email-address to create an new account"
/>
<TextInputField
required
validationMessage={
this.state.passwordErr.status ? this.state.passwordErr.value : false
}
isInvalid={this.state.passwordErr.status}
onChange={this.handlePasswordInput}
value={this.state.password}
appearance="neutral"
label="Your Password"
type="password"
inputHeight={36}
//description="Create a secure password to protect your account"
/>
<Checkbox
label="Keep me logged in"
checked={this.state.CheckBoxchecked}
onChange={this.handleCheckbox}
/>
<LoginFormButton
handleSubmit={this.handleSubmit}
/>
</Pane>
);
}
}
export default LoginForm;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
1) 验证将在 LoginForm 组件中进行,除非您将 this.state.password
和 this.state.email
传递给 LoginFormButton
组件.我不建议这样做,因为可以在 LoginForm 组件中处理验证。
2) HandleSubmit函数可以作为LoginForm
组件的props传递给LoginFormButton
组件,并且可以直接在组件内部使用。
我建议在您的状态变量中遵循 JS 标准的命名约定(驼峰式大小写)。并使用箭头函数,这样您就不必显式绑定(bind)函数,除非另有说明。
我已将 LoginFormButton
更改为无状态组件,因为它不需要状态。那样更好,也是 React 社区所鼓励的。
关于javascript - react : How can i run a function from another Component with state Variables,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52409073/