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

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传递给子级。 我想获取此状态并将其置于child的state.status中，但我不知道该怎么办。

Answer 1

作为响应，每当您的组件获得新的道具时，就可以使用componentWillReceiveProps()更新状态。

您可以阅读本文档以获取更多信息。

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