Updating text after button click with react.js

Question

I am exploring React.js, and I am trying to do something fairly simple. I would like to update the text of a certain portion of my web app when a user successfully submits 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 that I want to update is in an html element like so:

<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 the email has been successfully submitted. Any idea of how to do this?

is the h1 part of another react component ? or just outside react components ? — Dhiraj
– Dhiraj, Commented Jul 1, 2015 at 1:05
it's outside right now, but if I put it in the react components would that help? — user1072337
– user1072337, Commented Jul 1, 2015 at 1:51
Yeah, you want your <h1> as another react component. React manages the elements state(ish) (and thus the text inside of it) — winhowes
– winhowes, Commented Jul 1, 2015 at 2:31

Dhiraj · Accepted Answer · 2015-07-01 02:38:56Z

1

I would suggest placing all elements in React components.

You can place it in another component and establish a communication between components or place in one component.

The below is a case where h1 is in the same component.

Add a ref attribute like this

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

in componentDidMount the 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 reference you can update it from anywhere like this

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

edited Jul 1, 2015 at 2:38

answered Jul 1, 2015 at 2:32

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1072337 Over a year ago

Isn't there a better way to update this with state? Wouldn't the jquery .html be slower?

Dhiraj Over a year ago

AFAIK, this is a better way and no it won't be slower. If you don't like it you can still write in vanilla JS to it this.myh1.innerHTML=..

Collectives™ on Stack Overflow

Updating text after button click with react.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related