2

Привет не могу получить данные с формы на reactJs но сделал валидацию тперь не смог взять данные с формы и console.log()? Спасибо))

Это мой App.js

import React, { useState, useEffect } from 'react'
import './App.css'

function App() {

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [emailDirty, setEmialDirty] = useState(false)
  const [passwordDirty, setPasswordDirty] = useState(false)
  const [emailError, setEmailError] = useState('E-mail не может быть пустым!')
  const [passwordError, setPasswordError] = useState('Пароль не может быть пустым!')
  const [formValid, setFormValid] = useState(false)
  const [emailFind, passwordFind] = useState({email: '', password: ''})

  useEffect(() => {
     if(emailError || passwordError) {
        setFormValid(false)
     } else {
        setFormValid(true)
     }
  }, [emailError, passwordError])

  const emailHandler = (e) => {
      setEmail(e.target.value)
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(!re.test(String(e.target.value).toLowerCase())) {
          setEmailError('Некорректный E-mail!')
          if(!e.target.value) {
              setEmailError('E-mail не может быть пустым!')
          }
      } else {
        setEmailError('')
      }
      console.log(e.target.value);
  }

  const passwordHandler = (e) => {
      setPassword(e.target.value)
      if(e.target.value.length < 6 || e.target.value.length > 8){
          setPasswordError('Пароль должен быть больше 6 или меньше 8')
          if(!e.target.value) {
              setPasswordError('Пароль не может быть пустым!')
          }
      } else {
        setPasswordError('')
      }
      console.log(e.target.value);
  }

  const blurHandler = (e) => {
    switch (e.target.name) {
      case 'email': 
        setEmialDirty(true)
        break
      case 'password': 
        setPasswordDirty(true)
        break
    }
  }


  return (
    <div className="app">
      <form>
        <h1>Регистрация</h1>
        {( emailDirty && emailError ) && <p style={{color: "red"}}>{ emailError }</p>}
        <input 
            value={email} 
            onChange={e => emailHandler(e)}
            onBlur={e => blurHandler(e)} 
            name="email" type="text" 
            placeholder="E-mail" 
            /> <br/>
        {( passwordDirty && passwordError ) && <p style={{color: "red"}}>{ passwordError }</p>}
        <input 
            value={password} 
            onChange={e => passwordHandler(e)}
            onBlur={e => blurHandler(e)} 
            name="password" 
            type="password" 
            placeholder="Пароль" 
            /><br/>
        <button disabled={!formValid} type="submit">Регистрация</button>
      </form>
    </div>
  )
}

export default App

6
  • Что конкретно не смогли взять, куда смотреть?
    – entithat
    29 ноя 2020 в 10:53
  • Данные с input не смог вывести на console.log() 29 ноя 2020 в 11:08
  • console.log(e.target.value); - тут?
    – entithat
    29 ноя 2020 в 11:11
  • Он не работает, не знаю почему. 29 ноя 2020 в 11:21
  • 1
    @АлиНурлибеков все логи у вас работают. Но код ужасный.codesandbox.io/s/nameless-thunder-t1n08
    – Randall
    29 ноя 2020 в 14:42

1 ответ 1

0

Вот тут я изменил свой код но почему не работает пароль! Когда начинаешь печатать на поле пароль выходит ошибка

import React from 'react'

class App extends React.Component {
state = {
    email: '',
    password: ''
};

handleChange = (event) => {
    this.setState({ email: event.target.value })
}

handleChange2(event) {
    this.setState({ password: event.target.value })
}
  
handleClick = (event) => {
    event.preventDefault()
    console.log(this.state.email);
    console.log(this.state.password);
}
  
render() {
    const { email, password } = this.state
    return (
    <form>
    <label>
    <input type="text" value={email} name="email" placeholder="E-mail" onChange={this.handleChange} />
    <input type="password" value={password} placeholder="Пароль" name="password" onChange={this.handleChange2} />
    </label>
    <input onClick={this.handleClick} type="submit" value="Отправить" />
</form>
    );
}
}
  export default App

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.