Niedawno zacząłem pracować na Reaction.js , podczas tworzenia strony logowania użyłem metody setstate, aby ustawić wartość userEmail do pola tekstowego.

Stworzyłem metodę, która sprawdza ważność adresu e-mail i dzwonię do niego za każdym razem, gdy użytkownik wprowadza nową literę.

handleChangeInEmail(event) {
    var value = event.target.value;
    console.log("change in email value" + value);
    if(validateEmailAddress(value) == true) {
      this.setState(function() {
        return {
              showInvalidEmailError : false,
              userEmailForLogin: value,
           }
     });
   } else {
     this.setState(function() {
       return {
              showInvalidEmailError : true,
              userEmailForLogin: value

      }
  });
}

Ta metoda i userEmailForLogin state jest przekazywana w metodzie render jako

<EmailLoginPage  
   userEmailForLogin = {this.state.userEmailForLogin}
   onHandleChangeInEmail= {this.handleChangeInEmail}
/>

Używam metody w celu zatwierdzenia adresu e-mail i metody

validateEmailAddress : function(emailForLogin) {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailForLogin))  {  
            return true; 
        }  
        return false;  
    },

Używam tej metody i stan w renderowaniu emailoginpage jako <input type="text" name="" placeholder="Enter Email" className="email-input-txt" onChange={props.onHandleChangeInEmail} value = {props.userEmailForLogin}/>

Działa dobrze w normalnym przypadku, ale kiedy próbuję wprowadzić duże dodatki e-mail, powiedzmy yjgykgkykhhkuhkjhgkghjkhgkjhghjkghjghghkghbghbg@gmail.com, to awarie

IMO częsta zmiana w stanie powoduje to, ale nie mogłem zrozumieć, co należy zrobić, aby się go pozbyć.

0
Geek_To_Learn 27 czerwiec 2017, 13:13

3 odpowiedzi

Najlepsza odpowiedź

Myślę, że problem jest tylko regex, próbowałem z innymi i działa poprawnie.

Zamiast pisać if/else w funkcji change Po prostu napisz to w ten sposób:

change(event) {
    var value = event.target.value;
    this.setState({
       showInvalidEmailError : this.validateEmailAddress(value),
       value: value,
    });
}

Skopiowałem regex z tej odpowiedzi: Jak potwierdzić adres e-mail w JavaScript ?.

Sprawdź rozwiązanie robocze:

class App extends React.Component {
    
    constructor(){
        super();
        this.state = {
            value: '',
            showInvalidEmailError: false
        }
        this.change = this.change.bind(this);
    }

    change(event) {
        var value = event.target.value;
        this.setState(function() {
            return {
                showInvalidEmailError : this.validateEmailAddress(value),
                value: value,
            }
        });
    }
    
    validateEmailAddress(emailForLogin) {
        var regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(regex.test(emailForLogin)){
          return true;
      }
        return false;
    }

    render() {
        return(
            <div>
                <input value={this.state.value} onChange={this.change}/>
                <br/>
                valid email: {this.state.showInvalidEmailError + ''}
            </div>
        );
    }
}

ReactDOM.render(
    <App/>, 
    document.getElementById("app")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>
0
Mayank Shukla 27 czerwiec 2017, 11:34

Rozwiązanie z odwołaniem. W ten sposób można zmniejszyć wiele Setstate.

DEMO: https://jsfiddle.net/vedp/kp04015o/6/

class Email extends React.Component {
    constructor (props) {
        super(props)
        this.state = { email: "" }
    }

    handleChange = debounce((e) => {
        this.setState({ email: e.target.value })
    }, 1000)

    render() {
        return (
            <div className="widget">
                <p>{this.state.email}</p>
                <input onChange={this.handleChange} />
            </div>
        )
    }
}

React.render(<Email/>, document.getElementById('container'));


function debounce(callback, wait, context = this) {
  let timeout = null 
  let callbackArgs = null

  const later = () => callback.apply(context, callbackArgs)

  return function() {
    callbackArgs = arguments
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}
0
Ved 27 czerwiec 2017, 11:29

Możesz użyć funkcji zadłużenia Lodasha, aby funkcja sprawdzania nie została wywołana, chyba że użytkownik przestanie wpisywać dla x czas (300ms w moim scenariuszu poniżej).

_this.debounceCheck = debounce((value) => {
  if(validateEmailAddress(value)) {
    this.setState(function() {
      return {
        showInvalidEmailError : false,
        userEmailForLogin: value,
      }
    });
  } else {
    this.setState(function() {
      return {
        showInvalidEmailError : true,
        userEmailForLogin: value
      }
    });
  }
}, 300)

handleChangeInEmail(event) {
  _this.debounce(event.target.value)
}
0
Foxhoundn 27 czerwiec 2017, 11:25