невозможно ввести текстовое поле ввода в реагировать

Question

У меня есть Компонент, который может создать поле ввода, и у меня есть два других для входа и регистрации форм. Я могу ввести данные формы входа, но не могу ввести данные формы регистрации. Я не знаю, почему это происходит.

Форма ввода

import React, { Component } from 'react'
import './form-input.styles.scss'


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

export default FormInput

Форма регистрации

import React, { Component } from 'react'
import './sign-up.styles.scss'
import FormInput from '../form-input/form-input.component'
import CustomButton from '../custom-button/custom-button.component'

import {auth,createUserProfileDocument} from '../../firebase/firebase.utils'



class SignUp extends Component {
    constructor(props) {
        super(props)

        this.state = {
             displayName:'',
             email:'',
             password:'',
             confirmPassword:''
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleSubmit = async event=>{
        event.preventDefault()
        const {displayName,email,password,confirmPassword} = this.state

        if(password !== confirmPassword ){
            alert("passwords don't match")
            return
        }

        try{
            const {user} = await auth.createUserWithEmailAndPassword(email,password)
            await createUserProfileDocument(user,{displayName})

            this.setState({
                displayName:'',
                email:'',
                password:'',
                confirmPassword:''
            })

        }catch(error){
            console.error(error);

        }
    }

    handleChange = (event) => {
        const { name, value } = event.target

        this.setState({ [name]: value });
      };

    render(){
        const {displayName,email,password,confirmPassword} = this.state
        return(
            <div className='sign-up'>
        <h2 className='title'>I do not have a account</h2>
        <span>Sign up with your email and password</span>
        <form className='sign-up-form' onSubmit={this.handleSubmit}>
          <FormInput

            type='text'
            name='displayName'
            value={displayName}
            onChange={this.handleChange}
            label='Display Name'
            required
          />
          <FormInput
            type='email'
            name='email'
            value={email}
            onChange={this.handleChange}
            label='Email'
            required
          />
          <FormInput
            type='password'
            name='password'
            value={password}
            onChange={this.handleChange}
            label='Password'
            required
          />
          <FormInput
            type='password'
            name='confirmPassword'
            value={confirmPassword}
            onChange={this.handleChange}
            label='Confirm Password'
            required
          />
          <CustomButton type='submit'>SIGN UP</CustomButton>
        </form>
      </div>
        )
    }
}


export default SignUp

Форма входа

import React, { Component } from "react";
import { signInWithGoogle } from "../../firebase/firebase.utils";
import FormInput from "../form-input/form-input.component";
import CustomButton from "../custom-button/custom-button.component";

import "./sign-in.styles.scss";

class signIn extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: ""
    };
  }

  handleSubmit = event => {
    event.preventDefault();

    this.setState({ email: "", password: "" });
  };

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

  render() {
    return (
      <div className="sign-in">
        <h2>I already have an account</h2>
        <span>Sign in with your email and password</span>

        <form action="" onSubmit={this.handleSubmit}>
          <FormInput
            name="email"
            value={this.state.email}
            handleChange={this.handleChange}
            label="email"
            required
          />

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

          <div className='buttons'>
            <CustomButton type="submit">Sign in </CustomButton>
            <CustomButton isGoogleSignIn onClick={signInWithGoogle}>
              {" "}
              Sign in with Google{" "}
            </CustomButton>
          </div>
        </form>
      </div>
    );
  }
}

export default signIn;

Мне нужно создать форму регистрации и посмотреть, как она работает, но пока я не могу это сделать. Как я могу это исправить? Пожалуйста, помогите мне.

Answer 1

В вашем компоненте формы регистрации вы передаете:

value={displayName}

, который должен быть:

value={this.state.displayName}

То же самое относится и к другим FormInput's.

Answer 2

В форме регистрации

handleChange={this.handleChange}