Question

我正在尝试仅为应用程序实现简单的登录表单，但由于某种原因无法使我的三元运算符起作用。我只是使用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;

Answer 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 });
    }
    ....

}

条件渲染在React中不起作用

1 个答案: