Question

这是一种奇怪的情况。所以我有这个Login组件：

export default class Login extends React.Component {
    componentDidMount() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(() => document.getElementById('close').click())
            .catch(e => console.log(e));
    }

    render() {
        if (firebase.auth().currentUser === null)
            return '';
        else return <Redirect to='/questions'/>
    }
}

这是我的LoginForm

export default class LoginFormComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                show={this.props.show}
                onHide={() => this.props.changeShowState(false)}>
                <Modal.Header
                    closeButton>
                    <Modal.Title> Zaloguj sie </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <FormControl
                            id="email"
                            type="email"
                            label="Email address"
                            placeholder="Enter email"/>
                        <FormControl id="password" label="Password" type="password"/>
                        <Button onClick={<Login/>}>Zaloguj</Button>
                        {/*The problem is ^^^^^ here*/}

                    </form>
                </Modal.Body>
                <Modal.Footer>
                    <Button id="close" onClick={() => this.props.changeShowState(false)}>Close</Button>
                </Modal.Footer>
            </Modal>
        )
    }
}

整个问题是，我想在用户登录后重定向页面。我做了一些研究，我想我必须这样做。

问题是<Login/>元素未呈现。我猜测它并不是React如何运作，但我不知道如何完成它。我想要做的就是在登录后重定向用户。

Answer 1

您不必将它放在两个组件中。您的主要问题是您不能将React组件作为onClick处理程序。

我对它的看法是：

export default class LoginFormComponent extends React.Component {
    state = { loggedIn: false, error: false }

    constructor(props) {
        super(props);
    }

    handleSubmit() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(() => document.getElementById('close').click())
            .catch(e => console.log(e));

       if(firebase.auth().currentUser === null)
            this.setState({ loggedIn: false, error: true });
       else
            this.setState({ loggedIn: true, error: false});
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                { this.state.error && <span>Could not log in.</span> }
                { this.state.loggedIn && <Redirect to='/questions' /> }
                <FormControl
                    id="email"
                    type="email"
                    label="Email address"
                    placeholder="Enter email"/>
                <FormControl id="password" label="Password" type="password"/>
                <Button type="submit">Zaloguj</Button>
            </form>
        )
    }
}

Answer 2

我认为你不了解React是如何工作的。

首先，您不必使用＆＃34; document.getElementById（＆＃39; email＆＃39;）。value＆＃34;，因为React使用状态和道具。

之后，您无法将组件传递给onClick事件处理程序。 onClick需要一个函数。

如果要重定向用户，可以创建如下方法：

loginUser(){
    window.location = "https:..";
}

您的按钮将是：

<Button onClick={this.loginUser.bind(this)}>Zaloguj</Button>

但是当您使用React时，您需要重定向非常困难。看到您的组件似乎想要以PHP方式处理React（登录组件无法使用ComponentDidMount方法中的getElementById读取数据。您必须使用react-router进行应用程序路由，并且可以使用MobX或Redux之类的东西来存储用户登录数据。您甚至可以传递道具而不使用MobX或Redux）。

重定向onClick

2 个答案: