React.js：变量在状态更改时显示为未定义

Question

我正在尝试使用状态更新某些文本，然后在一定时间后将其还原。 我有一个变量“ email”，它是从输入框中的值中提取的。 文本正在更改，但“电子邮件”变量显示为“未定义”。 我做错了什么吗？

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

您需要添加一种方法，以在更改时更新搜索字段的值。 例如：

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);} 
    });

  }
});

注意_updateInputValue和onChange={this._updateInputValue}