React.js: Variable appearing as undefined on state change

Question

I am trying to update some text using state, and then have it revert back after a certain period of time. I have a variable "email" that I am pulling from the value in an input box. The text is changing, but the "email" variable appears as "undefined". Is there anything I am doing wrong?

Code:

    var SignupForm = React.createClass({
      getInitialState: function() {
        return {email: '', submitted: true};
      },

      render: function() {
        var email = this.state.value;
        var text = this.state.submitted ? 'Enter your email to request early access:' : 'Thank you!  
Expect a follow up at '+email+'soon!'; 
        return (
          <div>

            <h1 className="home-two-question">{text}</h1>

            <input type="email" className="input_field" ref="email" value={email} />

            <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
          </div>
        )
      },

      saveAndContinue: function(e) {
        e.preventDefault()

        // Get values via this.refs

        email = this.refs.email.getDOMNode().value
        this.setState({email: email})
        this.setState({submitted: !this.state.submitted});

        request = $.ajax({ 
              url: "/user", 
              type: "post", success:function(data){
              }, 
              data: {'email': email} ,beforeSend: function(data){console.log(data);} 
        });

      }
    });

    React.render(<SignupForm/>, document.getElementById('content'));

Answer 1

You need to add a method to update the value of the search field on change. For example:

var SignupForm = React.createClass({
  getInitialState: function() {
    return {email: '', submitted: true};
  },

  _updateInputValue(e) {
    this.setState({email: e.target.value});
  },

  render: function() {
    var text = this.state.submitted ? 'Enter your email to request early access:' : 'Thank you!  Expect a follow up at '+email+'soon!'; 
    return (
      <div>

        <h1 className="home-two-question">{text}</h1>

        <input type="text" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

        <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
      </div>
    )
  },

  saveAndContinue: function(e) {
    e.preventDefault()

    // Get values via this.refs

    email = this.refs.email.getDOMNode().value
    this.setState({email: email})
    this.setState({submitted: !this.state.submitted});

    request = $.ajax({ 
          url: "/user", 
          type: "post", success:function(data){
          }, 
          data: {'email': email} ,beforeSend: function(data){console.log(data);} 
    });

  }
});

notice _updateInputValue and onChange={this._updateInputValue}