Form Kullanım Örnekleri

Basit bir form

EcmaScript versiyonları arasında git gel yaparken form kullanımları çileye dönüşebilir.

Basit bir form yapısı

import React, { Component } from 'react';
import { Textfield, Button } from 'react-mdl'

//models/form.js
//import { formData } from '../../models/forms'


export const formData = { title: '', note: '' }


class AddCampaign extends Component {
    constructor(props) {
        super(props);
        this.state = { form: formData }; //hemen form bilgilerimizi tanımlıyoruz..

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        formData[name] = value; //gelen datayı formData'ya işliyoruz..
        this.setState({ form: formData }); //state güncelliyoruz
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state);
    }

    render() {
        return (
            <div className="p-20">
                <form className="" onSubmit={this.handleSubmit}>
                    <Textfield
                        value={this.state.form.title}
                        label="Text..."
                        floatingLabel
                        style={{ width: '100%' }}
                        name="title"
                        onChange={this.handleChange}
                    />
                    <Textfield
                        value={this.state.form.note}
                        label="Text lines..."
                        style={{ width: '100%' }}
                        name="note"
                        onChange={this.handleChange}
                    />
                    <Button type="submit" raised colored>Button</Button>
                </form>
            </div>

        );
    }
}

export default AddCampaign;

Çıkan log görüntüsü