为什么我不能在表单输入中输入任何内容

Question

我有一个 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
}

该函数已加载，但我无法在Password或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;
}

Answer 1

正如其他评论者所提到的，您不需要在非类上下文中.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具有不改变现有状态对象的额外好处

Answer 2

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

这是大多数 React 新手都会犯的错误。 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" />