Блог

У меня есть простая форма входа, просто имя пользователя и пароль.

• ввод имени пользователя должен обновлять свой атрибут значения при изменении.
• ввод пароля должен обновлять свой атрибут значения при изменении.
• The button Submit should be disabled until both username and password fields are filled . Я не уверен, как это сделать.

У меня есть несколько ошибок при сборке. Я не уверен, чего мне не хватает. Как мне это исправить? извините, моя реакция просто элементарна.

 import React from "react";
 

export default function LoginForm({ onSubmit }) {

this.state = { username: '', password: '' };
handleUsernameChange = (event) => this.setState({ email: event.target.value });
handlePasswordChange = (event) => this.setState({ email: event.target.value });

handleSubmitButton = () => {
    const { username, password } = this.state;
    const { onSubmit } = this.props;

    onSubmit(username-input, username-password);
  };
    return (
      <form>
        <div className="form-group">
            <input type="text" onChange={handleUsernameChange} id="username-input" placeholder="Username"/>
        </div>
        <div className="form-group">
            <input type="password" onChange={handlePasswordChange} id="password-input" placeholder="Password"/>
        </div>

        <button type="submit" onClick={onSubmit(username-input, password-input)}>Submit</button>

      </form>
    );
 
}
const mapDispatchToProps = dispatch => ({
    onSubmit: (username, password) => {
      dispatch(signup(username, password));
    },
});
mapDispatchToProps(LoginForm); 

ошибки:

  Line 9:1:    'handleUsernameChange' is not defined  no-undef
  Line 10:1:   'handlePasswordChange' is not defined  no-undef
  Line 12:1:   'handleSubmitButton' is not defined    no-undef
  Line 16:23:  'input' is not defined                 no-undef
  Line 21:42:  'handleUsernameChange' is not defined  no-undef
  Line 24:46:  'handlePasswordChange' is not defined  no-undef
  Line 27:49:  'username' is not defined              no-undef
  Line 27:58:  'input' is not defined                 no-undef
  Line 27:65:  'password' is not defined              no-undef
  Line 27:74:  'input' is not defined                 no-undef
  Line 35:16:  'signup' is not defined                no-undef
 

Состояние является неизменяемым, поэтому вы в основном устанавливаете его как объект, содержащий только email то, что вы обрабатываете изменение. Вы должны сохранить каждый элемент в его собственном состоянии, а затем обработать состояние отключенной кнопки useEffect() , установив крючок.

Вот переработанная версия (вам нужно будет самостоятельно выполнить отправку в хранилище Redux, так как мы не знаем, используете ли вы Thunk или что-то подобное в качестве промежуточного программного обеспечения):

 import React, { useState, useEffect } from 'react';
 
const LoginForm = (props) => {
    const [ username, setUsername ] = useState('');
    const [ password, setPassword ] = useState('');
    const [ buttonDisabled, setButtonDisabled ] = useState(true);

    const handleSubmit = () => {
        dispatch(signup(username, password));
    };

    useEffect(() => {
        setButtonDisabled(
            ! (username !== '' amp;amp; password !== '')
        );
     }, [ username, password ]);

    return (
        <form>
            <div className="form-group">
                <input 
                    type="text" 
                    onInput={(e) => setUsername(e.target.value)} 
                    id="username-input" 
                    placeholder="Username"
                    value={ username }
                />
            </div>
            <div className="form-group">
                <input 
                    type="password" 
                    onInput={(e) => setPassword(e.target.value)}
                    id="password-input" 
                    placeholder="Password"
                    value={ password }
                />
            </div>

            <button 
                disabled={ buttonDisabled }
                type="submit" 
                onClick={ handleSubmit }
                value="Submit"
            />
      </form>
    );
};

export default LoginForm;