Question

我正在探索React.js，我正在尝试做一些相当简单的事情。我想在用户成功提交电子邮件时更新我的网络应用程序的某个部分的文本。

到目前为止我所拥有的：

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

  render: function() {
    var email = this.state.value;
    return (
      <div>
        <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

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

  }
});

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

我要更新的文本位于html元素中，如下所示：

<h1 class="home-two-question">This is the text!</h1>

我想将其更新为：

<h1 class="home-two-question">You entered the text!</h1>

电子邮件成功提交后。知道如何做到这一点吗？

Answer 1

我建议将所有元素放在React组件中。

您可以将其放在另一个组件中，并在组件之间建立通信或放在一个组件中。

以下是h1在同一组件中的情况。

添加像这样的属性

<h1 class="..." ref="myh1"></h1>

在componentDidMount中，h1引用可以像这样存储（语法根据反应版本而有所不同）

componentDidMount: function () {
  this.myh1 = React.findDOMNode(this.refs.myh1);
}

现在你有了一个参考，你可以从像这样的任何地方更新它

$(this.myh1).html(...);

按下click.js按钮后更新文本

1 个答案: