Universal react form handler

Часто вижу в чужом коде формы с отдельным обработчиком на каждое поле ввода, это пиздец, в форме 100500 одинаковых уёбищных методов, которые устанавливают одно поле в состояние — вот пруф.

Если ссылка сдохнет вот кусок кода


<TagInput
    value={this.state.emails}
    onChange={(emails) => this.onEmailChange(emails)} />

Едрён батон, что ты с моими глазами делаешь, из них уже кровь течет, смотри как надо:


import React, {PropTypes, Component} from "react";
import {FormControl, Form} from "react-bootstrap";


export default class MyForm extends Component {

	static propTypes = {
		email: PropTypes.string
	};

	state = {
		email: this.props.email
	};

	onSubmit(e) {
		e.preventDefault();
		// do ajax call;
	}

	onChange(e) {
		this.setState({[e.target.name]: e.target.value});
	}

	render() {
		return (
			<Form horizontal action="/api/vehicles" onSubmit={::this.onSubmit}>
				<FormControl
					type="email"
					name="email"
					value={this.state.email}
					placeholder="me@example.com"
					onChange={::this.onChange}
				/>
			</Form>
		);
	}
}

Один хуй разницы ты babel используешь, ну так добавь плагин `transform-function-bind` и живи счастливо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *