Как мне отправить форму авторизации, чтобы выходили данные?

Question

[hollanditkzn]

Не могу нормально получить данные по отправке формы, использую библиотечку material ui

import React from 'react';
import ReactDOM from 'react-dom';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();
const style = {
    button: {
        margin: 12
    },
    exampleImageInput: {
        cursor: 'pointer',
        position: 'absolute',
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        width: '100%',
        opacity: 0,
    }
};

class UserForm extends React.Component{
    constructor(props){
        super(props);
        this.state = {login: '', password: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e){
        this.setState = ({login: e.target.login, password: e.target.password});
    }
    handleSubmit(e){
        e.preventDefault();
        alert(`login: ${this.state.login} password: ${this.state.password}`);
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Fields text="Введите логин" type="text" value={this.state.login} onChange={this.handleChange}/>
                    <Fields text="Введите пароль" type="password" value={this.state.password} onChange={this.handleChange}/>
                    <MuiThemeProvider>
                        <RaiseButtin label="Войти" fullWidth={true} style={style.button}> <input type="submit" style={style.exampleImageInput}/> </RaiseButtin>
                    </MuiThemeProvider>
                </form>
            </div>
        );
    }
}

class Fields extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <MuiThemeProvider>
            <div>
                <TextField
                    hintText={this.props.text}
                    type={this.props.type}
                />
            </div>
            </MuiThemeProvider>
        );
    }
}

ReactDOM.render(
    <UserForm />,
    document.getElementById('content')
);

Вот в песочнице https://codepen.io/rusline/pen/aEmKVa

Comments

[Dmitry Tallmange]

Что означает «нормально получить данные»?

[hollanditkzn]

Dmitry Tallmange, У меня в alert login: password:
А должно прийти то, что я ввел в input

Answer 1

[Антон Спирин]

Так:

class UserForm extends React.Component{
  state = {
    login: '',
    password: '',
  };
  
  handleChange = e => {
    const { name, value } = e.target;
    
    this.setState({
      [name]: value,
    });
  };
  
  handleSubmit = e => {
    const { login, password } = this.state;

    e.preventDefault();
    alert(`
      login: ${login}
      password: ${password}
    `);
  };
  
  render(){
    const { login, password } = this.state;

    return(
      <div>
        <form onSubmit={this.handleSubmit}>
          <Fields
            text="Введите логин"
            type="text"
            name="login"
            value={login}
            onChange={this.handleChange}
           />
          <Fields
            text="Введите пароль"
            type="password"
            value={password}
            name="password"
            onChange={this.handleChange}
           />
          <MuiThemeProvider>
            <RaiseButtin
              label="Войти"
              fullWidth={true}
              style={style.button}
             >
               <input
                 type="submit"
                 style={style.exampleImageInput}
               />
             </RaiseButtin>
          </MuiThemeProvider>
        </form>
      </div>
    );
  }
}

Обратите внимание, что добавлены свойства(атрибуты) name для Fields.

Демо: https://jsfiddle.net/tkvz8ggn/

Comments

[davidnum95]

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

[Антон Спирин]

davidnum95, нет смысла в этом случае. Посмотрите исходный код setState. Лишняя операция.

[Антон Спирин]

davidnum95, вру, чето попутал. Это же ключи, а не объекты. И верно, и нет. Правильно так:

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

Спасибо!

[davidnum95]

Антон Спирин, а я уже полез в исходники, думал что то изменилось. Правильно и так, и так.

[Антон Спирин]

davidnum95, this.state в setState по-хорошему передавать нельзя. В этом случае ничего страшного, но если setState будет вызываться в разных местах, то может случиться неожиданность, так как операция асинхронная. Лучше приучать себя всегда писать безопасный вариант с передачей аргументом функции prevState => ({ ... }). Но в данном случае разницы нет.

[Антон Спирин]

davidnum95, ткаки не обязательно. https://jsfiddle.net/hdyz8xmt/
Потому что:
state = { ...prevState, ...newState };
или

state = { ...{ login: 'login', password: '' }, ...{ password: 'password' } };

// result => state = { login: 'login', password: 'password' }

Все-таки не попутал)

[davidnum95]

Антон Спирин, буду знать!

[hollanditkzn]

Антон Спирин, А такой вопрос, не пойму почему-то когда я указываю value то у меня ничего не набирается, в этом случае куда я должен смотреть?

<TextField
                            hintText="Введите пароль"
                            type="password"
                            name="password"
                            value={this.state.password}
                        />

[hollanditkzn]

Антон Спирин, Хотя тут никаких ограничений не должно быть в библеотеки www.material-ui.com/#/components/text-field

[Антон Спирин]

hollanditkzn, вы забыли определить onChange:

<TextField
  hintText="Введите пароль"
  type="password"
  name="password"
  value={this.state.password}
  onChange={this.handleChange}
/>

Так как вы используете state для value, value будет меняться только по изменению state

Еще хорошим тоном является определять константы в render. Для login и password вместо использования this.state.login и this.state.password определить:

render() {
  const { login, password } = this.state;

  return (
    ...
    <TextField
      hintText="Введите пароль"
      type="password"
      name="password"
      value={password}
      onChange={this.handleChange}
    />
    ...
  )
}

[hollanditkzn]

Антон Спирин, Да я пока что не привык так писать. Просто на js я перешел недавно и у меня еще в голове стоит php синтаксис 5.6
У меня такой вопрос если не сложно
handleSubmit = e => {
Чем он отличается вот этого handleSubmit(e){
Типо я в первом случае приравниваю к событию переменную? просто че то я не нашел пути этой реализации.
И второй момент
const { login, password } = this.state;
Там вас как будет выглядить и есть чтобы прочесть по данным моментам где?

[Антон Спирин]

hollanditkzn, вместо того чтобы писать:

class UserForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      ...
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e){
    ...
  }

  handleSubmit(e){
    ...
  }
}

Достаточно:

class UserForm extends React.Component{
  state = {
     ...
  };

  handleChange = e => {
     ...
  };

  handleSubmit = e => {
    ...
  };
}

inline arrow functions ссылаются на контекст экземпляра и самому биндить их не надо.

Второй вопрос не понял) Но запись вида:
const { login, password } = this.state;
аналогична:

const login = this.state.login;
const password = this.state.password;

Просто код так получается лаконичней. Особенно если много параметров из props и state используете.

[Антон Спирин]

hollanditkzn, вот эта ссылка может быть вам полезна
es6-features.org/#ObjectMatchingShorthandNotation

Answer 2

[davidnum95]

Вы хоть понимаете что происходит в этой функции? Или вы просто код скопировали откуда то?

handleChange(e){
        this.setState = ({login: e.target.login, password: e.target.password});
    }

Comments

[hollanditkzn]

Для отслеживания изменений в поле ввода нам надо определить обработчик для события change с помощью атрибута onChange. Этот обработчик будет срабатывать при каждом нажатии клавиши клавиатуры. Если мы не определим для поля подобный обработчик, то это поле ввода будет доступно только для чтения.

Суть каждого обработчика заключается в изменении значений в this.state:

[hollanditkzn]

Должен отследить login и password поля

[davidnum95]

hollanditkzn, ничего общего с вашей функцией скопированный текст не имеет.