daily pastebin goal
5%
SHARE
TWEET

Untitled

a guest Feb 13th, 2018 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react';
  2. import { Link, RouteComponentProps } from 'react-router-dom';
  3. import { connect } from 'react-redux';
  4. import { ApplicationState } from '../store';
  5. import * as LogonStore from '../store/LogonStore';
  6.  
  7. type LogonProps =
  8.     LogonStore.LogonState
  9.     & typeof LogonStore.actionCreators
  10.     & RouteComponentProps<{}>;
  11.  
  12. class Logon extends React.Component<any, any> {
  13.     public constructor(props) {
  14.         super(props);
  15.         this.state = { un: '', pw: '' };
  16.         this.handleChange = this.handleChange.bind(this);      
  17.     }
  18.  
  19.     handleChange(event) {
  20.         console.log(event.target.value); // works fine
  21.         this.setState({ un: event.target.un, pw: event.target.pw });
  22.         console.log(this.state); //first  un: '', pw: '' then un: undefined, pw: undefined
  23.     }
  24.  
  25.     public render() {
  26.         return <div >
  27.             <h1>Logon</h1>
  28.             <label>username</label><input value={this.state.un} onChange={this.handleChange} />
  29.             <label>password</label><input value={this.state.pw} onChange={this.handleChange} />
  30.             <br />        
  31.         </div>;
  32.     }
  33. }
  34.  
  35.  
  36. export default connect(
  37.     (state: ApplicationState) => state.logon, // Selects which state properties are merged into the component's props
  38.     LogonStore.actionCreators                 // Selects which action creators are merged into the component's props
  39. )(Logon) as typeof Logon;
RAW Paste Data
Top