www.state-it.info

Gran base de respuestas a las preguntas de los desarrolladores
Header decor

¿Cómo puedo enviar un formulario de autorización para que salían de los datos?

hollanditkzn 2018-01-10 13:04:38

No puedo normalmente obtener datos para el envío de formularios, uso la biblioteca 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')
);

Aquí, en la caja de arena https://codepen.io/rusline/pen/aEmKVa

p00h 2018-01-10 13:06:40

Que significa la "normalidad obtener los datos de la"?


hollanditkzn 2018-01-10 13:11:04

p00h, tengo en alert login: password:
Y tiene que venir algo que me introdujo en el input


Total answers: 2

rockon404 2018-01-10 13:35:08

Así:

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>
    );
  }
}


Tenga en cuenta que las propiedades(atributos) name de Fields.

Demo: https://jsfiddle.net/tkvz8ggn/

davidnum95 2018-01-10 13:40:28

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


rockon404 2018-01-10 13:42:17

davidnum95 no tiene sentido en este caso. Ver el código fuente de setState. El exceso de operación.


rockon404 2018-01-10 13:45:15

davidnum95, miento, los obligó a hacerlo. Esto mismo las claves, y no los objetos. Y es cierto, y no. Correctamente:

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


Gracias!


davidnum95 2018-01-10 13:49:11

rockon404, y ya se metió la mano en el código fuente, pensaba que algo ha cambiado. Correctamente y así, y así.


rockon404 2018-01-10 13:54:36

davidnum95, this.state en setState bueno no se puede transferir. En este caso, no pasa nada, pero si setState se llamará en diferentes lugares, puede ocurrir la sorpresa, así como la operación asincrónica. Es mejor enseñar a sí mismo es siempre el escribir es la opción más segura con la transferencia de un argumento de función prevState => ({ ... }). Pero en este caso la diferencia no.


rockon404 2018-01-10 14:07:32

davidnum95, ткаки no necesariamente. https://jsfiddle.net/hdyz8xmt/
Porque:
state = { ...prevState, ...newState };
o

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

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

Todavía no obligó a hacerlo)


davidnum95 2018-01-10 14:13:51

rockon404, voy a saber!


hollanditkzn 2018-01-10 14:16:31

rockon404, Y una pregunta, no entiendo por qué-cuando señalo value tengo nada de escribir, en este caso, a dónde tengo que mirar?

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


hollanditkzn 2018-01-10 14:17:29

rockon404, Aunque aquí no hay limitaciones, no debe ser en библеотеки www.material-ui.com/#/components/text-field


rockon404 2018-01-10 14:22:18

hollanditkzn, se olvida de determinar onChange:

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

Puesto que se utiliza state de value, value va a cambiar sólo por el cambio de state

Todavía es posible definir constantes en el render. Para login y password en lugar de utilizar this.state.login y this.state.password determinar:

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

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


hollanditkzn 2018-01-10 14:35:14

rockon404, Sí, yo hasta que no está acostumbrado a escribir así. Sólo en js me ha pasado recientemente y todavía tengo en la cabeza vale la pena la sintaxis de php 5.6
Tengo una pregunta si no es difícil de
handleSubmit = e => {
En qué se diferencia de esto handleSubmit(e){
De tipo i en el primer caso, приравниваю a un evento de la variable? simplemente che no he encontrado la ruta de acceso a la aplicación.
Y el segundo momento de
const { login, password } = this.state;
Allí pronto como se vea y hay que leer de los datos de los puntos donde?


rockon404 2018-01-10 14:43:59

hollanditkzn, en lugar de escribir:

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){
    ...
  }
}


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

  handleChange = e => {
     ...
  };

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

inline arrow funciones hacen referencia al contexto de la instancia y más биндить no es necesario.

La segunda pregunta no la entiendo) Pero la entrada de la vista:
const { login, password } = this.state;
es similar a la:
const login = this.state.login;
const password = this.state.password;

Código resulta лаконичней. Especialmente si el número de parámetros de props y state utilizando.


rockon404 2018-01-10 15:05:18

hollanditkzn he aquí, este enlace puede ser de utilidad
es6-features.org/#ObjectMatchingShorthandNotation


davidnum95 2018-01-10 13:29:54

¿tiene Usted alguna idea de lo que sucede en esta función? O simplemente el código copiado de donde es?

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

hollanditkzn 2018-01-10 13:35:01

Para realizar un seguimiento de los cambios en el campo de entrada tenemos que determinar un controlador para el evento change mediante el atributo onChange. Este controlador se activará cada vez que se pulsa una tecla del teclado. Si nosotros no definimos para el campo próximo a éste de un controlador, este campo de entrada será de sólo lectura.

La esencia de cada controlador consiste en el cambio de valores en this.state:


hollanditkzn 2018-01-10 13:35:44

Debe realizar el seguimiento de login y password del campo


davidnum95 2018-01-10 13:39:03

hollanditkzn, nada que ver con su función de copiado el texto no tiene.


Preguntas relacionadas:

Footer decor

© www.state-it.info | Base of answers to questions for developers and programmers.