html - inputs - Usando onBlur con JSX y React

react select onchange

Question

Estoy intentando crear una función de confirmación de contraseña que genera un error solo después de que un usuario deja el campo de confirmación. Estoy trabajando con Facebook React JS. Este es mi componente de entrada:

<input
    type="password"
    placeholder="Password (confirm)"
    valueLink={this.linkState(''password2'')}
    onBlur={this.renderPasswordConfirmError()}
 />

Esto es renderPasswordConfirmError:

renderPasswordConfirmError: function() {
  if (this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},

Cuando ejecuto la página, el mensaje no se muestra cuando se ingresan contraseñas en conflicto.

Answer 1

Hay algunos problemas aquí.

1: onBlur espera una devolución de llamada, y usted está llamando a renderPasswordConfirmError y está usando el valor de retorno, que es nulo.

2: necesitas un lugar para hacer el error.

3: necesita una bandera para rastrear "y yo validando", que establecería en verdadero en el desenfoque. Puede establecer esto en falso en el enfoque si lo desea, dependiendo de su comportamiento deseado.

handleBlur: function () {
  this.setState({validating: true});
},
render: function () {
  return <div>
    ...
    <input
        type="password"
        placeholder="Password (confirm)"
        valueLink={this.linkState(''password2'')}
        onBlur={this.handleBlur}
     />
    ...
    {this.renderPasswordConfirmError()}
  </div>
},
renderPasswordConfirmError: function() {
  if (this.state.validating && this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},