Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Wywoływanie metody klasy rozszerzonej w klasie głównej React

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Wywoływanie metody klasy rozszerzonej w klasie głównej React

Post 26.08.2018, 19:31:43

Tak jak w temacie chciałbym wywołać metodę validateInput klasy Validate w klasie Input w metodzie onBlur w gdy nie zostanie spełniony warunek, ktoś wie jak to zrobić? Co nie zrobię to wywala mi błędy.
Kod: Zaznacz cały
class InstallHeader extends React.Component{
    render(){
        return(
            <section id='header'>
                <header>
                    <h1>Kalkulator internetowy</h1>
                    <h2>Instalacja</h2>
                </header> 
            </section>
        );
    }

class InstallForm extends React.Component{
    render(){
        return(
            <section id='form'>
                <div id='form-container' className='form-container'>
                    <form name='install-form'>
                        <Label label_name='Login' label='login' />
                        <Input name='login' default_value='Login' value='Login' />
                        <Label label_name='Hasło' label='password' />
                        <Input name='password' default_value='Hasło' value='Hasło' />
                        <Label label_name='Host bazy danych' label='host' />
                        <Input name='host' default_value='Host' value='Host' />
                        <Label label_name='Nazwa bazy danych' label='base' />
                        <Input name='base' default_value='Nazwa bazy danych' value='Nazwa bazy danych' />
                    </form>
                </div>
            </section>
        );
    }
}     
class Input extends InstallForm{
   
    constructor(props){
        super();
        const default_value = props.default_value;
        this.state = {
            value: props.default_value
          }
        this.child = React.createRef();
    } 
    render(){
        return(
            <div className='form-row'>
                <input name={this.props.name} value = {this.state.value} onChange={this.handleChange} onClick={this.handleClick} onBlur={this.handleBlur} />
            </div>
        );
    } 
    handleChange = (event) => {
        this.setState({value: event.target.value });
    }
    handleClick = () => {
        this.setState({value: '' });
    } 
    handleBlur = () =>{
        if(this.state.value == '' || this.state.value == this.props.default_value ){
            this.setState({value: this.props.default_value});
        }
        else{
       
        }
    }
 
}
class Label extends InstallForm{
    render(){
        return(
            <label htmlFor={this.props.label}>{this.props.label_name}</label>
        );
    } 
       
}
class Validate extends Input{
 
    validateInput = () =>{
        alert('dsa');
    }
}
ReactDOM.render(
    <React.Fragment>
        <InstallHeader />
        <InstallForm />
        <Validate />
    </React.Fragment>,
    document.getElementById('app')
);
Dukov
Posty: 13
Dołączył(a): 24.02.2017

Re: Wywoływanie metody klasy rozszerzonej w klasie głównej R

Post 04.09.2018, 11:55:29

Nie jestem pewien czy dobrze zrozumiałem, ale tak się nie da. Klasa ogólna Input nie ma pojęcia o metodzie validateInput zdefiniowanej w klasie potomnej. Powinieneś raczej nadpisać metodę handleBlur wewnątrz klasy Validate i tam wykonać walidację.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19786
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51770 zarejestrowanych użytkowników.
Najnowszy użytkownik: mitchellnews


Nasi użytkownicy napisali:

  • 938050 wiadomości
  • w 247613 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)