Как получить данные с react формы?

Question

Привет не могу получить данные с формы на 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

Answer 1

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

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

Answer 2

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

У тебя классическая потеря контекста... И не только. Сама манера менять объект стейта не верная. Одно затирает другое... Я немного подправил твой пример - теперь он работающий и в консоль выводятся значения логина и пароля.

Но на сегодняшний момент Реакт ориентируется на функциональные компоненты и хуки.

class App extends React.Component {
  state = {
    email: '',
    password: ''
  };
  constructor(){
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleChange2 = this.handleChange2.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }
  handleChange(event) {
    this.setState(o => ({
      ...o,
      email: event.target.value
    }))
  }
  handleChange2(event) {
    this.setState(o => ({
      ...o,
      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>
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"
  crossorigin>
</script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" 
  crossorigin>
</script>

БЛОГ НА HUSL

Как получить данные с react формы?

Ответы (2 шт):