Updating text after button clicked with response.js
I am learning React.js and I am trying to do something pretty simple. I would like to update the text of a specific part of my web application when the user successfully sends their email.
What I have so far:
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'));
The text I want to update is in the html element, for example:
<h1 class="home-two-question">This is the text!</h1>
I want to update it to:
<h1 class="home-two-question">You entered the text!</h1>
after sending the letter successfully. Any idea how to do this?
+3
source to share
1 answer
I would suggest placing all the elements in React components.
You can place it in another component and link between components, or place it in one component.
Below is the case where h1 is in one component.
Add ref attribute like this
<h1 class="..." ref="myh1"></h1>
in componentDidMount h1 reference can be stored like this (syntax differs based on react version)
componentDidMount: function () {
this.myh1 = React.findDOMNode(this.refs.myh1);
}
now that you have a link you can update from anywhere like this
$(this.myh1).html(...);
+1
source to share