React Context API和组件方法[重复]

Question

我关注了一些在线示例，它们在 Context 中有一个计数器和一个增量函数，在一个遥远的组件上，调用增量方法并显示结果。一切都很好，但是......我正在尝试对此进行扩展并创建一个登录框，它会设置一个 isAthenticated 标志。

我有一个非常基本的上下文：

import React from 'react';

const Context = React.createContext();

export class Provider extends React.Component {

    state = {
        isAuthenticated: false,
        user: {
            name: "Craig",
            email: "craig@here.com"
        },
        changeEmail: (newEmail) => {
            let user = this.state.user;
            user.email = newEmail;
            console.log(user);
            this.setState({ user: user})
        },
        changeAuthenticated: () => {
            this.setState ({ isAuthenticated: !this.state.isAuthenticated });
        }
    }

    render() {
        return (
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

export const Consumer = Context.Consumer;

在其中我允许用户更改电子邮件，并更改 isAuthenticated 状态。

我的组件（删除样式的东西）如下所示：

import React from 'react';
import { Input, Label, Button, Container } from 'reactstrap';
import { Consumer } from '../context';


class Login extends React.Component {

    render() {


        return (
            <Consumer>
                {value => {
                    return (
                        <Container style={containerStyle} >
                            <div style={loginBoxStyle}>
                                <div>
                                    <h3>Login</h3>
                                </div>
                                <div style={loginBoxFieldsStyle}>
                                    <div style={loginBoxFieldStyle}>
                                        <div style={loginBoxLabelStyle}>
                                        <Label for="email">Email:</Label>
                                        </div>
                                        <div style={loginBoxLabelStyle}>
                                            <Input type="email" name="email" id="email" placeholder="Your Email" value={value.user.email} onChange={e=>value.changeEmail(e.target.value)} />  
                                        </div>
                                    </div>
                                </div>
                                <div style={loginBoxFieldsStyle}>
                                    <div style={loginBoxFieldStyle}>
                                        <div style={loginBoxLabelStyle}>
                                            <Label for="password">Password:</Label>
                                        </div>
                                        <div style={loginBoxLabelStyle}>
                                        <Input type="password" name="password" id="password" placeholder="Your Password" />
                                        </div>
                                    </div>
                                </div>
                                <div style={loginBoxButtonStyle}>
                                    <Button color="info" onClick={value.changeAuthenticated}>Login</Button>
                                </div>
                            </div>
                        </Container>
                    )}
                }
            </Consumer>
        )
    }
}

export default Login;

所以当我更改电子邮件时，上下文状态会更新。现在，当我单击登录按钮时，它只是切换 IsAuthenticated。

我不希望在我在电子邮件框中键入时更新状态。我更愿意在单击登录按钮时更新状态。所以我觉得我需要一个本地组件状态或其他东西，当我在文本框中编辑数据时会更新该状态。然后在我单击登录时更新上下文。

但是...如何设置状态？ “值”（来自上下文）仅在渲染中可用。我需要在渲染之外设置我的组件状态。那么我该如何实现呢？

我的登录按钮 onClick 还应该触发一个具有所有验证等的本地方法，然后更新我的路由以在成功时重定向到页面。但是它需要从标签外部访问 Context.UpdateMethod。不知道如何实现。

Answer 1

您可能应该只创建一个子组件，然后使用道具来初始化状态。

class Login extends React.Component {
  render() {
    return (
      <Consumer>
        {value => (
          <Container style={containerStyle}>
            <SubComponent
              changeAuthenticated={value.changeAuthenticated}
              // ...etc