reactjs - 输入值未显示在反应文本框中

Question

我正在制作一个注册组件，其中有 4 个字段：

1. 电子邮件
2. 密码
3. 显示名称
4. 确认密码

---

当我在输入字段上使用onChange函数更新值时，输入字段的电子邮件和密码正在工作，并且显示名称和确认密码不显示文本。

---

我不明白为什么会这样？

                                  **SignUp.jsx**
```



     class SignUp extends React.Component{
            constructor(props){
                super(props);

                this.state={
                    displayName:'',
                    email:'',
                    password:'',
                    confirmPassword:''
                }
            }

           handleChange = (event)=>{
                const { name, value } = event.target;
                this.setState({ [name]: value }, ()=>console.log(`name:${name} and value:${value} and target${event.target}`));
            }

            render(){
                const { displayName, email, password, confirmPassword } = this.state;
                return(
                    <>
                    <form onSubmit={this.handleSubmit}>
                        <FormInput handleChange={this.handleChange} name="email" type="email" label="email" value={email} required/>

                        <FormInput handleChange={this.handleChange} name="password" type="password" label="password" value={password}/>

                        <FormInput handleChange={this.handleChange} name="display-name" type="text" label="display name" value={displayName} required/>

                        <FormInput handleChange={[see the following images][1]this.handleChange} name="confirm-password" type="password" label="confirm password" value={confirmPassword}/>

                    <Button type="submit" value="Sign Up" input_class="signup-button"/>               
                </form>
                </>
            );
        }
    }

```

                              **FormInput.jsx**

```

    const FormInput = ({handleChange, label, ...otherFormFields}) => (
        <div className="group">
            {label?
                (<label className={`${otherFormFields.value.length? 'shrink' : ''} form-input-label`}>
                {label.toUpperCase()}
                </label>) 
                : null
            }
            <div>
                <input className="form-input" onChange={handleChange} {...otherFormFields}></input>
            </div>
        </div>
    )

    export default FormInput;

```
when i enter the value in email text field
```
 **name:email and value:q
 name:email and value:qu
 name:email and value:que
 name:email and value:quer
 name:email and value:query
 name:email and value:query@
 name:email and value:query@g
 name:email and value:query@gm
 name:email and value:query@gma
 name:email and value:query@gmai
 name:email and value:query@gmail
 name:email and value:query@gmail.
 name:email and value:query@gmail.c
 name:email and value:query@gmail.co
 name:email and value:query@gmail.com**
```
when i enter the value in password text field
```
 **name:password and value:h
 name:password and value:he
 name:password and value:hel
 name:password and value:hell
 name:password and value:hello**
```

but when i enter the value in confirm password or display name
```
**name:display-name and value:q
name:display-name and value:w
name:display-name and value:e
name:display-name and value:r
name:display-name and value:t
name:display-name and value:y**
```
why is it overriding the value every time, and the text box remains empty.


  [IMAGE]: https://i.stack.imgur.com/vxFVg.png

Answer 1

在state你有displayNameandconfirmPassword中，更改FormInput名称以匹配。

<FormInput handleChange={this.handleChange} name="displayName" type="text" label="display name" value={displayName} required/>

<FormInput handleChange={[see the following images][1]this.handleChange} name="confirmPassword" type="password" label="confirm password" value={confirmPassword} />

Answer 2

请参阅工作代码框： https ://codesandbox.io/s/charming-golick-43k27

为了让您state动态更新并与您的handleChange方法协调，您应该names向您的输入提供直接与state对象中的键匹配的内容。因此，不displayName等于也不等于。display-nameconfirm-passwordconfirmPassword

      <FormInput
        handleChange={this.handleChange}
        name="displayName"
        type="text"
        label="display name"
        value={displayName}
        required
      />
      <FormInput
        name="confirmPassword"
        type="password"
        label="confirm password"
        value={confirmPassword}
        handleChange={this.handleChange}
      />

看看你定义的 handleChange 函数：

  handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

这实质上是说，name从创建此事件的元素中获取属性，并使用它在我们的组件name中查找匹配项。找到后，使用来自该元素的 更新 。keystatekeyvalue

Answer 3

本地状态有'displayName'和'confirmPassword'属性，但是FormInput displayName的name属性是'display-name'，'confirm-password'也是一样。

所以 event.target.name 是 handleChange 方法中的 'display-name' 和 'confirm-password'。

更改名称属性以匹配状态属性，反之亦然。

我建议你在 React DevTools 中观看状态更改，当你输入时你会看到新的状态属性（'display-name' 和 'confirm-password'），所以你会猜到的。

Answer 4

默认值改变值

<FormInput handleChange={this.handleChange} name="email" type="email" label="email" defaultValue={email} required/>