Question

我在子组件中有一个显示状态文本的范围：

class LoginForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            status: ""
        };

        this.logIn = this.logIn.bind(this);
        this.setStatus = this.setStatus.bind(this);
    }

    logIn() {
        if (this.validFields()) {
            ...
        }
    }

    validFields() {
        let isValid = true;

        let username = $("#username").val().trim();
        let password = $("#password").val().trim();

        let error = "";
        if (username === "") {
            error = "Please enter your username.";
            isValid = false;
        }
        else if (password === "") {
            error = "Please enter your password.";
            isValid = false;
        }

        this.setStatus(error);

        return isValid;
    }

    setStatus(status) {
        this.setState({
            status: status
        });
    }

    render() {
        return (
            <div className="form">                  
                <input type="text" name="username" id="username" placeholder="Username" required />
                <input type="password" name="password" id="password" placeholder="Password" required />

                <button type="submit" onClick={this.logIn}>Log In</button>
                <span className="login-msg">{this.state.status}</span>
            </div>
        );
    }
}

当用户单击按钮且文本框为空时，将显示错误消息。但实际的登录方法是在父组件中，当登录失败时，如果要更新子项，我想要state.status。

父母看起来像这样：

class IndexContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            logInStatus: ""
        };

        this.logIn = this.logIn.bind(this);
    }

    logIn(companycode, username, password) {
        var loginData = {
            ...
        };

        fetch("/Account/Login", {
            ...
        }).then((response) => {
            response.json().then((data) => {
                if (data.Success) {
                    window.location.href = data.ReturnUrl;
                }
                else {
                    this.setState({
                        logInStatus: data.ErrorMessage
                    });
                }
            });
        }).catch(function (err) {
            console.log(err);
        });
    }

    render() {
        return (
            <BrowserRouter>
                <Route path="/Account/Login" exact
                    render={() => <LoginForm
                        logIn={this.logIn}
                        status={this.state.logInStatus} />
                    }
                />
            </BrowserRouter>
        );
    }
}

父母将loginStatus消息作为孩子的props.status传递给孩子。我希望得到这种状态，并将其置于孩子的状态状态，但我无法弄清楚该怎么做。

Answer 1

在反应中，只要您的组件获得新道具，就可以使用componentWillReceiveProps()来更新状态。

您可以阅读this document以获取更多信息。

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

如何使用父组件和子组件设置文本值

1 个答案: