Kategoria: React

10 mar 2018

Wysłanie formularza w React

Proste wysłanie formularza w React do tego axios czyli biblioteka oparta na obiektach HTTP dla przeglądarek i Node.js więcej można przeczytać tutaj - axios

import React, { Component } from 'react';
import axios from 'axios';

class UserForm extends Component {
    state = {
        imie: "",
        nazwisko: "",
        email: "",
    };

    onChange = (event) => {
        const state = this.state
        state[event.target.name] = event.target.value;
        this.setState(state);
    }

    onSubmit = (event) => {
        event.preventDefault();
        const { imie, nazwisko, email } = this.state;

        axios.post('/', { imie, nazwisko, email })
            .then((result) => {
                // a tuj coś robimy z danymi
            });
    }

    render() {
        const { imie, nazwisko, email } = this.state;
        return (
            <form onSubmit={this.onSubmit}>
                <input type="text" name="imie" value={imie} onChange={this.onChange} />
                <input type="text" name="nazwisko" value={nazwisko} onChange={this.onChange} />
                <input type="text" name="email" value={email} onChange={this.onChange} />
                <button type="submit">Wyślij</button>
            </form>
        );
    }
}

export default UserForm;
2 mar 2018

show/hide scroll React

Ukrywanie buttona scroll-top jeżeli wysokość przekroczy 200 oraz dodanie obsługi zdarzenia na onClick i wywołanie funkcji scrollToTop i metody scrollIntoView.

export default BackToTop extends Component {
    state = {
        scrolling: false,
        scrollPosHeight: 200
    }

    componentDidMount() {
        console.log('componentDidMount()');
        window.addEventListener('scroll', this.hideShowButtonTop);
    };

    componentWillUnmount() {
        console.log('componentWillUnmount()');
        window.removeEventListener('scroll', this.hideShowButtonTop);
    };

    hideShowButtonTop = () => {
        const scrollPos = window.pageYOffset || document.documentElement.scrollTop; 
        const myDiv = document.querySelector('.back-to-top');
        (scrollPos > this.state.scrollPosHeight && scrollPos !== 0) ? myDiv.style.display = 'block' : myDiv.style.display = 'none';
    }

    scrollToTop() {
        const logoView = document.getElementById('logo');
        logoView.scrollIntoView({
            behavior: 'smooth'
        })
    }

    render() {
        return (
            <div onClick={this.scrollToTop} className="back-to-top"></div>
        )
    };
};
Copyright © | kodyWiG Theme