para llamar al evento Cambiar después de presionar la tecla Enter

Solución:

Según React Doc, puedes escuchar eventos de teclado, como onKeyPress o onKeyUp, no onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

Actualización: use React.Component

Aquí está el código que usa React.Component que hace lo mismo

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

Aquí está el jsfiddle.

Actualización 2: use un componente funcional

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

Puede utilizar onKeyPress directamente en el campo de entrada. La función onChange cambia el valor de estado en cada cambio de campo de entrada y después de presionar Enter, llamará a una función de búsqueda ().

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

prensado Ingresar cuando el enfoque en un control de formulario (entrada) normalmente desencadena un submit (onSubmit) en el formulario en sí (no en la entrada) para que pueda vincular su this.handleInput al formulario onSubmit.

Alternativamente, puede vincularlo al blur (onBlur) evento en el input lo que sucede cuando se quita el enfoque (por ejemplo, al pasar al siguiente elemento que puede obtener el enfoque)

---

---

Utiliza Nuestro Buscador