条件渲染在 React 中不起作用答案

【问题标题】：Conditional Rendering not working in React条件渲染在 React 中不起作用
【发布时间】：2020-06-15 00:57:21
【问题描述】：

我正在尝试为应用程序实现一个简单的登录表单，但由于某种原因无法让我的三元运算符工作。我只是使用 json 文件导入登录凭据，并使用提交处理程序将用户输入与使用三元的数据进行比较。提交时，没有任何反应。请参阅下面的代码：

import React from 'react'
import customData from '../db.json'
import DocumentPage from './DocumentPage'



class MemberPortal extends React.Component {

    state = {
        username: "",
        password: "",
    }

    handleUserChange = (event) => {
        this.setState({username: event.target.value});
    }

    handlePwChange = (event) => {
        this.setState({password: event.target.value});
    }

    handleSubmit = (event) => {
        event.preventDefault();
        return this.state.password == customData.password ? <DocumentPage /> : alert("incorrect login information")
    }

    render(){
        return(
            <div id ="test">
            <form onSubmit = {()=>this.handleSubmit}>
                <label for="username">User Name:</label>
                <div className="ui input">
                    <input type="text" id="username" value = {this.state.username} onChange = {this.handleUserChange} placeholder = "Username"></input>
                </div>
                <label for="password">Password:</label>
                <div className="ui input">
                    <input type="text" id="password" value = {this.state.password} onChange = {this.handlePwChange}  placeholder="Password"></input>
                </div>
                <input className="ui blue button" type="submit" value="Submit" onClick = {this.handleSubmit}></input>
            </form>
            </div>
        )
    }

}

export default MemberPortal;

【问题讨论】：

您需要使用this.props.history.push("/DocumentPage") 重定向到另一个组件。在codesandbox.io/s/routing-7brm6 此处查看带有您的代码的沙箱......而不是customData.password，检查是针对" " （空密码）暂时可以改回customData.password..如果您在密码中输入内容并单击提交，则会发出警报..
如果从return this.state.password == customData.password ? <DocumentPage /> : alert("incorrect login information") 中删除return 会发生什么？
@DVN-Anakin 我做了，不幸的是没有工作。

标签： reactjs jsx

【解决方案1】：

handleSubmit 是一个事件处理程序，它是一个在您单击按钮时将触发的函数，您不应该返回 JSX 元素或从中返回任何内容。一个好的做法是避免从事件处理程序返回任何内容以避免混淆。

一般来说，如果您熟悉 Typescript 等静态类型语言，则事件处理程序的返回类型应为 void。

正如其他人已经指出的那样，如果您可以在登录成功的情况下重定向到另一个URL，或者如果您想在同一个组件内进行一些条件渲染，您可以设置一个状态指示登录成功。

代码示例可以是：

class MemberPortal 扩展 React.Component {

    state = {
        username: "",
        password: "",
        isLoginSuccessful: false
    }

handleSubmit = (event) => {
        event.preventDefault();

        // perform login function here
        ....

        // Login not success, alert or do anything you like
        if (this.state.password !== customData.password) {
            this.setState({ isLoginSuccessful: false });
            alert("incorrect login information");

            return;
        }

        // Login success, perform redirect or set the boolean flag to true for conditional rendering
        this.setState({ isLoginSuccessful: true });
    }
    ....

}

【讨论】：