123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- // @flow
- import { createStore, combineReducers } from 'redux';
- import { reducer as formReducer, reduxForm } from 'redux-form';
- import React, { Component } from 'react';
- import logo from './logo.svg';
- import './App.css';
- import { domOnlyProps } from './redux_form';
- const reducers = {
- form: formReducer,
- };
- const reducer = combineReducers(reducers);
- const store = createStore(reducer);
- type Props = {
- fields: Object,
- handleSubmit: Function
- };
- type State = {
- };
- let ContactForm = class extends Component<Props, State> {
- render() {
- const {
- fields: { firstName, lastName, email },
- handleSubmit,
- } = this.props;
- return (
- <div className="app">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <h1 className="App-title">Welcome to React with Redux-Form</h1>
- </header>
- <form className="App-intro" onSubmit={handleSubmit}>
- <div>
- <label htmlFor="first">First name</label>
- <input id="first" type="text" placeholder="First Name" autoComplete="given-name" {...domOnlyProps(firstName) } />
- </div>
- <div>
- <label htmlFor="last">Last name</label>
- <input id="last" type="text" placeholder="Last Name" autoComplete="family-name" {...domOnlyProps(lastName) } />
- </div>
- <div>
- <label htmlFor="email">Email</label>
- <input id="email" type="email" placeholder="Email" autoComplete="email" {...domOnlyProps(email) } />
- </div>
- <button type="submit">Submit</button>
- </form>
- </div>
- );
- }
- };
- ContactForm = reduxForm({
- form: 'contact', // unique name for this form
- fields: [
- 'firstName',
- 'lastName',
- 'email',
- ],
- store,
- })(ContactForm);
- export default ContactForm;
|