Question

我在导航栏组件上登录了但是我的主要组件上有一些东西需要在有人登录时更新，我可以让导航栏上的登录工作，但变量不会被传回直到父母我调用导航栏的代码看起来像这样

<LoginBar AuthRes={this.state.AuthResults} IsLoggedIn={this.state.isLoggedIn}/>

这是将变量IsLoggedIn传递到我的导航栏然后在我的导航栏中我的代码就是这个

LoginAuth = (Res) => {
    if (Res.username === this.state.Username && Res.password === this.state.Password) {
        this.setState({
            IsLoggedIn: true,
        }, function(){

        });
        this.hideModal();

    } else {
        console.log("Gets to login auth and false");
    }
}
CheckLoginAuth() {
    console.log("gets to check login auth");
    console.log(this.state.AuthRes);
    console.log("Username=" + this.state.Username);
    console.log("Password=" + this.state.Password);
    var self = this;
    this.props.AuthRes.map(function (Res) {
        console.log("ID=" + Res.id);
        console.log("Username=" + Res.username);
        console.log("Password=" + Res.password);
        self.LoginAuth(Res);
    });
}

所以当点击登录时，它会询问你的细节，然后使用.map来浏览我所拥有的文件中的所有登录详细信息，然后将其传递给LoginAuth，它将检查输入是否与auth文件匹配将IsLoggedIn设置为true如果它匹配如何将IsLoggedIn推回到父级以更改那里的内容

一旦我找到了正确的一个，我将如何打破循环，好像我有一个警告说alert("Incorrect username or password")如果所有三个值都没有得到满足则这3次

谢谢安迪

编辑：

当我这样做时.props.IsLoggedIn（true）或this.props.isLoggedIn（true）我得到错误TypeError：无法读取属性＆＃39; props＆＃39;未定义所以它说isLoggedIn和IsLoggedIn尚未定义

state = { AuthRes: this.props.AuthRes, isOpen: false, Username: '', Password: '', searchResults: [], testMode: true, isLoggedIn: this.props.IsLoggedIn, Auth: '', }

Answer 1

您可以做的是使用props将一个函数从Parent组件传递给Child组件。假设您在父组件中有此功能：

function doSomething(argument){
    console.log(argument);
}

现在将此函数传递给您的子组件：

<LoginBar AuthRes={this.state.AuthResults} IsLoggedIn={this.state.isLoggedIn} doSomething={this.doSomething}/>

然后，在子组件中，当您获得该功能时，只需从您需要的任何地方调用它：

//Some code ...
this.props.doSomething(argument)
//Some code ...

对于中断问题，您无法中断map功能。你可以做的是将map函数转换为for循环并使用break或使用map中的一些标志来知道何时停止执行地图。看看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

React Js将布尔值传递回父状态

1 个答案: