0

我有一个 ReactJS 应用程序。我正在尝试通过此处接受的答案作为我的示例来实现表单验证。我不得不对其进行一些调整，因为我使用的是函数而不是组件（即。我没有构造函数）。

这是整个功能：

import React, { useState } from "react";
import Config from 'config';
import PropTypes from "prop-types";
import "./Login.css";

export default function ChangePassword({ setToken }) {
    const [fields, setFields] = useState({});
    const [errors, setErrors] = useState({});
    
    const tokenString = sessionStorage.getItem("token");
    const token = JSON.parse(tokenString);

    let headers = new Headers({
        "Accept": "application/json",
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + token.token
    });

    async function changePassword(password) {
        return fetch(Config.apiUrl + "/api/Users/ChangePassword", {
            method: "POST",
            headers: headers,
            body: password
        })
            .then((response) => {
                return response.json();
            });
    }

    function handleValidation() {
        let formErrors = {};
        let formIsValid = true;

        //Password
        if (!fields["password"]) {
            formIsValid = false;
            formErrors["password"] = "Cannot be empty";
        }

        if (typeof fields["password"] !== "undefined") {
            if (!fields["password"].match(/^[a-zA-Z0-9!@#$%^&?]+$/)) {
                formIsValid = false;
                formErrors["password"] = "Only accepted";
            }
        }

        //Confirm Password
        if (!fields["confirmPassword"]) {
            formIsValid = false;
            formErrors["confirmPassword"] = "Cannot be empty";
        }

        if (typeof fields["confirmPassword"] !== "undefined") {
            if (!fields["confirmPassword"].match(/^[a-zA-Z0-9!@#$%^&?]+$/)) {
                formIsValid = false;
                formErrors["confirmPassword"] = "Only accepted";
            }
        }

        if (fields["confirmPassword"] != fields["password"]) {
            formIsValid = false;
            formErrors["confirmPassword"] = "Does not match Password";
        }

        setErrors({ formErrors });
        return formIsValid;
    }

    const handleSubmit = async e => {
        e.preventDefault();
        if (handleValidation()) {
            const myToken = await changePassword(fields["password"]);
            setToken(myToken);
        } else {
            alert("Form has errors.")
        }            
    }

    function handleChange(field, e) {
        let myFields = fields;
        myFields[field] = e.target.value;
        setFields({ myFields });        
    }

    return (
        <div className="login wrapper fadeInDown">
            <div className="login formContent ">
                <h1 className="login centered">Change Password</h1>                
                <form onSubmit={handleSubmit}>                    
                    <div className="centered">
                        <span style={{ color: "red" }}>{errors["password"]}</span>
                        <input type="password" value={fields["password"] || ""} onChange={e => handleChange.bind(this, "password")} id="login" className="login fadeIn second" placeholder="Password" />
                    </div>
                    <div className="centered">
                        <span style={{ color: "red" }}>{errors["confirmPassword"]}</span>
                        <input type="password" value={fields["confirmPassword"] || ""} onChange={e => handleChange.bind(this, "confirmPassword")} id="login" className="login fadeIn third" placeholder="Confirm Password" />
                    </div>
                    <div className="centered">
                        <input type="submit" className="login fadeIn fourth" value="Submit" />
                    </div>
                </form>
            </div>  
        </div>
    )
}

ChangePassword.propTypes = {
    setToken: PropTypes.func.isRequired
}

函数加载，但我无法在Passwordor中输入任何内容Confirm Password。对于我的生活，我无法弄清楚为什么。我希望善良的 SO 用户能指出我的错误。

更新

只是为了完整......根据@evolutionxbox的评论，我将我的功能更改changePassword为：

async function changePassword(password) {
    const response = await fetch(Config.apiUrl + "/api/Users/ChangePassword", {
        method: "POST",
        headers: headers,
        body: JSON.stringify(password)
    })
    const json = await response.json();
    console.log(json);
    return json;
}
4

2 回答 2

3

正如其他评论者所提到的，您不需要.bind在非类上下文中。

更改您的onChange事件处理程序

onChange={e => handleChange.bind(this, "password")}

为您的元素添加一个name属性：input

<input name="password" ... />
<input name="confirmPassword" ... />

至

onChange={handleChange}

然后您可以将您的handleChange功能更新为以下内容：

function handleChange(e) {
  setFields({
    ...fields,
    [e.target.name]: e.target.value
  });
}

以上setState具有不改变现有状态对象的额外好处

于 2021-07-25T23:26:34.610 回答
0 
function handleChange(field, e) {
            let myFields = fields;
            myFields[field] = e.target.value;
            setFields({ myFields });        
        }

这是大多数反应新手都会犯的错误。UseState 是不可变的，当你说

 let myFields = fields;

您正在复制对字段 useState 的引用。尝试解构，这将复制值而不是引用

 let myFields = [...fields];

但我的建议是创建 2 个 useStates 一个用于密码，另一个用于确认密码，这将使您的代码更清晰，并且不会弄乱状态。然后从那个改变你在jsx中的输入元素

<input type="password" value={fields["password"] || ""} onChange={e => handleChange.bind(this, "password")} id="login" className="login fadeIn second" placeholder="Password" />

到那个

<input type="password" value={fields["password"] || ""} onChange={e => setPassword(e.target.value)} id="login" className="login fadeIn second" placeholder="Password" />
于 2021-07-25T23:26:37.150 回答