import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';

import {addTodo} from '../actions.js';

class AddTodo extends Component {

  constructor(props, context) {
    super(props, context);

    this.onSubmit = this.onSubmit.bind(this);
    this.refInput = this.refInput.bind(this);
  }

  onSubmit(ev) {
    ev.preventDefault();

    const input = this.input;
    if (!input.value.trim()) {
      return;
    }

    this.props.onAdd(input.value);
    input.value = '';
  }

  refInput(node) {
    this.input = node;
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input ref={this.refInput} />
          <button type="submit">
            添加
          </button>
        </form>
      </div>
    )
  }
}

AddTodo.propTypes = {
  onAdd: PropTypes.func.isRequired
};


const mapDispatchToProps = (dispatch) => {
  return {
    onAdd: (text) => {
      dispatch(addTodo(text));
    }
  }
};

export default connect(null, mapDispatchToProps)(AddTodo);


@@ -276,24 +276,29 @@
 his.
-ref
+on
 Input
+Change
  = this.
 refI
@@ -293,24 +293,29 @@
  = this.
-ref
+on
 Input
+Change
 .bind(th
@@ -318,16 +318,59 @@
 d(this);
+%0A%0A    this.state = %7B%0A      value: ''%0A    %7D;
 %0A  %7D%0A%0A  
@@ -425,24 +425,29 @@
 st input
+Value
  = this.
 input;%0A 
@@ -438,21 +438,27 @@
  = this.
-input
+state.value
 ;%0A    if
@@ -461,26 +461,25 @@
   if (!input
-.v
+V
 alue.trim())
@@ -524,26 +524,25 @@
 .onAdd(input
-.v
+V
 alue);%0A    i
@@ -544,24 +544,34 @@
     
-input.
+this.setState(%7B
 value
- =
+:
  ''
+%7D)
 ;%0A  
@@ -579,21 +579,27 @@
 %0A%0A  
-ref
+on
 Input
-(node
+Change(event
 ) %7B%0A
@@ -611,20 +611,57 @@
 his.
-input = node
+setState(%7B%0A      value: event.target.value%0A    %7D)
 ;%0A  
@@ -762,26 +762,61 @@
 put 
-ref
+onChange
 =%7Bthis.
-ref
+on
 Input
+Change%7D value=%7Bthis.state.value
 %7D /%3E

change addTodo to be controlled component