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

Posted 2023-04-14

【中文标题】React Context API和组件方法[重复]

【英文标题】：React Context API and component methods [duplicate]

【发布时间】：2019-10-28 16:23:03

【问题描述】：

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

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

import React from 'react';

const Context = React.createContext();

export class Provider extends React.Component 

    state = 
        isAuthenticated: false,
        user: 
            name: "Craig",
            email: "[e-mail]"
        ,
        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。不知道如何实现。

【问题讨论】：

从您的问题看来，您面临的唯一问题是使用渲染之外的上下文，重复的帖子详细介绍了该上下文。如果它仍然不适合你，请告诉我

【参考方案1】：

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

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