Javascript React上下文API和组件方法

我遵循了一些在线示例，其中在上下文中有一个计数器和一个增量函数，在一个远程组件上，调用增量方法，结果显示。很好，但是。。。我试图在此基础上展开并创建一个登录框，该框设置一个ISAuthenticated标志

我有一个非常基本的背景：

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;

从“React”导入React；
const Context=React.createContext（）；
导出类提供程序扩展了React.Component{
状态={
I认证：错误，
用户：{
姓名：“克雷格”，
电子邮件：“craig@here.com"
},
更改电子邮件：（新电子邮件）=>{
让user=this.state.user；
user.email=newEmail；
console.log（用户）；
this.setState（{user:user}）
},
changeAuthenticated:（）=>{
this.setState（{isAuthenticated:！this.state.isAuthenticated}）；
}
}
render（）{
返回(
{this.props.children}
)
}
}
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;

从“React”导入React；
从“reactstrap”导入{输入、标签、按钮、容器}；
从“../context”导入{Consumer}；
类登录扩展了React.Component{
render（）{
返回(
{value=>{
返回(
登录
电邮：
value.changeMail（e.target.value）}/>
密码：
登录
)}
}
)
}
}
导出默认登录；

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

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

但是。。。我如何建立国家？”“值”（来自上下文）仅在渲染内部可用。我需要在渲染外部设置组件状态。那么，我将如何实现这一目标

---

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

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

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

类登录扩展了React.Component{
render（）{
返回(
{value=>(
从你的问题看来，你面临的唯一问题是在渲染之外使用上下文，这篇重复文章详细介绍了它。如果它仍然不适合你，请告诉我