在将输入字段值设置为具有空值的状态对象后，现在我无法在 UI 的输入字段中键入任何内容。我正在使用反应 js

Question

我正在构建一个表单来从用户那里获取数据，然后将它们保存在一个状态中，以便稍后 post 它到一个端点，所以我将输入的值保存到一个空字符串中，然后我稍后将验证输入，但是一旦我将值设置为 formValues 元素并打开浏览器以测试我的代码，但是我尝试在输入字段中输入多少内容，却什么也没有写。在控制台中，我似乎只拿了一个字母。

这是我的代码

import react, { Component, useState } from 'react';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";

import './sign.css';

const Sign = () => {

    const intialValues = { firstname: "", lastname: "", mobile: "", email: "", password: "", cpassword: "" }

    const [formValues, setFormValues] = useState(intialValues);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormValues({ ...formValues, [name]: value });
    }

    const handleSubmit = (err) => {
        err.preventDefault();

    }



    return (

        <div className='signup'>
            <form onSubmit={handleSubmit} >
                <div className="container">
                    <h1>Sign Up</h1>
                    <div className="name">
                        <div>
                            <input
                                type="text"
                                placeholder="First name"
                                name="First name"
                                value={formValues.firstname}
                                onChange={handleChange}
                                required />
                        </div>
                        <div>
                            <input
                                type="text"
                                placeholder="Last name"
                                name="Last name"
                                value={formValues.lastname}
                                onChange={handleChange}
                                required />
                        </div>
                    </div>
                    <br />
                    <div>
                        <input
                            type="text"
                            placeholder="Business mobile number"
                            name="Business mobile number"
                            value={formValues.mobile}
                            onChange={handleChange}
                            required />
                        <br />
                        <input
                            type="text"
                            placeholder="Email Adress"
                            name="Email Adress"
                            value={formValues.email}
                            onChange={handleChange}
                            required />
                        <br />
                        <div className="password">
                            <input
                                type='password'
                                placeholder="Password"
                                name="psw"
                                id='password'
                                value={formValues.password}
                                onChange={handleChange}
                                required />
                            <FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
                            <br />
                            <input
                                type="password"
                                placeholder="Confirm Password"
                                name="Confirm Password"
                                id='Cpassword'
                                value={formValues.cpassword}
                                onChange={handleChange}
                                required />
                            <FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
                        </div>
                    </div>
                    <br />
                    <div className="checkbox">
                            <input type="checkbox" className="check" />i’ve read and agree with <a href="url" >Terms of service</a>
                    </div>
                    <div className="clearfix">
                        <button type="submit" className="signupbtn">Sign Up</button>
                    </div>
                </div>
            </form>
        </div>
    )
}




export default Sign;

Answer 1

在您的 handleSubmit 方法中，您希望 input 元素的名称与 initialValues 对象键之一相同。但是 JSX 中的 input 标签没有指定 name 属性的正确值，因此绑定不会发生。

对于 JSX 中的每个 input 标签，更改它们的 name 属性以匹配状态对象的相应键。例如

  <input
     type="text"
     placeholder="First name"
     name="firstname"
     value={formValues.firstname}
     onChange={handleChange}
     required />

Answer 2

输入字段的名称与您在顶部采取的状态（对象键）的名称不同，请这样更改，

import react, { Component, useState } from 'react';

从“@fortawesome/react-fontawesome”导入 { FontAwesomeIcon }；从“@fortawesome/free-solid-svg-icons”导入{faEyeSlash, faEye};

导入'./sign.css';

const 符号 = () => {

const intialValues = { firstname: "", lastname: "", mobile: "", email: "", password: "", cpassword: "" }

const [formValues, setFormValues] = useState(intialValues);

const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
}

const handleSubmit = (err) => {
    err.preventDefault();

}



return (

    <div className='signup'>
        <form onSubmit={handleSubmit} >
            <div className="container">
                <h1>Sign Up</h1>
                <div className="name">
                    <div>
                        <input
                            type="text"
                            placeholder="First name"
                            name="firstname"
                            value={formValues.firstname}
                            onChange={handleChange}
                            required />
                    </div>
                    <div>
                        <input
                            type="text"
                            placeholder="Last name"
                            name="lastname"
                            value={formValues.lastname}
                            onChange={handleChange}
                            required />
                    </div>
                </div>
                <br />
                <div>
                    <input
                        type="text"
                        placeholder="Business mobile number"
                        name="mobile"
                        value={formValues.mobile}
                        onChange={handleChange}
                        required />
                    <br />
                    <input
                        type="text"
                        placeholder="Email Adress"
                        name="email"
                        value={formValues.email}
                        onChange={handleChange}
                        required />
                    <br />
                    <div className="password">
                        <input
                            type='password'
                            placeholder="Password"
                            name="password"
                            id='password'
                            value={formValues.password}
                            onChange={handleChange}
                            required />
                        <FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
                        <br />
                        <input
                            type="password"
                            placeholder="Confirm Password"
                            name="cpassword"
                            id='Cpassword'
                            value={formValues.cpassword}
                            onChange={handleChange}
                            required />
                        <FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
                    </div>
                </div>
                <br />
                <div className="checkbox">
                        <input type="checkbox" className="check" />i’ve read and agree with <a href="url" >Terms of service</a>
                </div>
                <div className="clearfix">
                    <button type="submit" className="signupbtn">Sign Up</button>
                </div>
            </div>
        </form>
    </div>
)

}

在将输入字段值设置为具有空值的状态对象后，现在我无法在 UI 的输入字段中键入任何内容。我正在使用反应 js

after setting the input field value to a state object with an empty value, now I can't type anything in the input field in the UI. i am using react js

javascript

reactjs

react-hooks

use-state