Este es mi render función:

  render: function() {
    return  <div className="input-group search-box">
              <input
                onChange={this.handleTextChange}
                type="text"
                value={this.state.text}
                className="form-control search-item" />
              <span className="input-group-btn"></span>
        </div>
   }

y tengo esta mi controlador de eventos:

   handleTextChange: function(event) {
     console.log(event.target.value);
     this.setState({
       text: event.target.value
     });
   }

El problema es que cuando me «guardar» un elemento, o de la consola.registro de impresión de la salida, el último carácter que falta – por ejemplo, si escribo «primera», voy a conseguir «abetos» impreso, y debe haber otro evento clave para capturar el último carácter. He intentado onKeyUp – que no me deja escribir nada, y también he intentado onKeyDown y onKeyPress, que la salida de la nada.
Lo que está sucediendo aquí y por qué? y ¿cómo puedo conseguir que el último carácter que se muestran?

  • parece casi exactamente como en el ejemplo: facebook.github.io/react/docs/forms.html – nada más que la modificación de su alcance?
  • ¿qué otras reaccionar-funciones hace su componente? lo que está en getInitialState()?
  • ¿Cómo estás de ahorro o console.loging exactamente? Recuerde que setState es async: stackoverflow.com/questions/32674174/…
  • Yo tenía el mismo problema. Yo estaba en la programación del evento.de destino.valor y, a continuación, asignar el nuevo estado para un almacén de datos. El último personaje no sale en la tienda. En lugar de eso me eventos asignados.de destino.valor para el estado y la tienda. El último carácter se convierte en el almacén de datos ahora.
InformationsquelleAutor reectrix | 2015-10-12

3 Comentarios

  1. 38

    Cuando estás registro del estado? Recuerde que setState es asincrónico, por lo que si desea imprimir el nueva estado, usted tiene que utilizar el parámetro de devolución de llamada. Imaginar este componente:

    let Comp = React.createClass({
      getInitialState() {
        return { text: "abc" };
      },
    
      render() {
        return (
          <div>
            <input type="text" value={this.state.text}
                   onChange={this.handleChange} />
            <button onClick={this.printValue}>Print Value</button>
          </div>
        );
      },
    
      handleChange(event) {
        console.log("Value from event:", event.target.value);
    
        this.setState({
          text: event.target.value
        }, () => {
          console.log("New state in ASYNC callback:", this.state.text);
        });
    
        console.log("New state DIRECTLY after setState:", this.state.text);
      },
    
      printValue() {
        console.log("Current value:", this.state.text);
      }
    });

    Escribir un d al final de la entrada se producirá en el siguiente de haber iniciado sesión en la consola:

    Value from event: abcd
    New state DIRECTLY after setState: abc
    New state in ASYNC callback: abcd

    Observe que el valor medio es que falta el último carácter. He aquí un ejemplo de trabajo.

    • MALDITA sea. Este fue molesto
  2. 5

    Desde setState() función asincrónica, he utilizado la esperan.He logrado este uso de async y await, aquí está mi código

    render: function() {
        return  <div className="input-group search-box">
                  <input
                    onChange={(e) => {this.handleTextChange(e)}}
                    type="text"
                    value={this.state.text}
                    className="form-control search-item" />
                  <span className="input-group-btn"></span>
            </div>
       }

    La handleTextCahnge función:

    handleTextChange = async function(event) {
    
         await this.setState({text: event.target.value});
         console.log(this.state.text);
       }
  3. 2

    setState() función asincrónica. Sin el uso de devolución de llamada se puede utilizar otra variable auxiliar para almacenar y utilizar el valor actualizado de inmediato. Como :

    export default class My_class extends Component{
    constructor(props)
    {
    super(props):
    this.state={
    text:"",
    };
    this.text="";
    }
     render: function() {
        return  <div className="input-group search-box">
                  <input
                    onChange={this.handleTextChange}
                    type="text"
                    value={this.state.text}
                    className="form-control search-item" />
                  <span className="input-group-btn"></span>
            </div>
       }
    
    handleTextChange: function(event) {
         console.log(event.target.value);
         this.text = event.target.value;
         this.setState({
          text: event.target.value
         });
       }

    Obtendrá su valor actualizado en este.variable de texto de inmediato. Pero usted debe usar este.estado.texto para mostrar texto en la interfaz de usuario.

Dejar respuesta

Please enter your comment!
Please enter your name here