SHARE
TWEET

Untitled

a guest Feb 4th, 2016 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. This is obviously a very basic example. It takes props to render the inputs with their values, and
  3. to render any error state. It also takes props to update the state, or submit the form.
  4. */
  5.  
  6. const LoginForm = props => (
  7.   <form onSubmit={props.onSubmit}>
  8.     <input type="text" name="username" onChange={props.onChangeUsername} value={props.username}/>
  9.     { props.userNameError && <span class="error">{ props.usernameError }</span> }
  10.     <input type="password" name="password" onChange={props.onChangePassword} value={props.password}/>
  11.     { props.passwordError && <span class="error">{ props.passwordError }</span> }
  12.     <input type="submit" value="Log in"/>
  13.   </form>
  14. );
  15.  
  16. LoginForm.propTypes = {
  17.   username: React.PropTypes.string.isRequired,
  18.   usernameError: React.PropTypes.string.isRequired,
  19.   password: React.PropTypes.string.isRequired,
  20.   passwordError: React.PropTypes.string.isRequired,
  21.   onChangeUsername: React.PropTypes.func.isRequired,
  22.   onChangePassword: React.PropTypes.func.isRequired,
  23.   onSubmit: React.PropTypes.func.isRequired
  24. };
  25.  
  26. export default LoginForm;
  27.  
  28. /*
  29. This is just one approach - it may very well be overkill to notify a parent / dispatch an action
  30. on every keypress. Instead, you could write a stateful component where the inputs' onChange events
  31. change the local, intermediate state, and then onBlur (and probably also onSubmit) is what causes
  32. that state to leave the component and be persisted somewhere else.
  33.  
  34. Both of those approaches are assuming that the state is ultimately stored outside the form component.
  35. I like to put it in a redux store, because a) you can put business logic like validation either in
  36. a reducer, or a reselect selector, and b) when submitting the form you can dispatch a thunk action
  37. which reads the store using getState, and then submits it.
  38. */
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top