How to return text input into React component

Question

i’m new to programming in general but i have a simple question.Sorry if this isn’t applicable but I’m trying to take the tutorials and implement the concepts for my own super simple program. I’d like to take a simple text input and return it inside a component. I know this should be extremely simple but I don’t get what to set the “action” to on the form element b/c when I return {this.props.myformrefID} I’m getting the Please use POST request error here: https://jsfiddle.net/69z2wepo/38225/#&togetherjs=3AARPdP6c0

 Edit in JSFiddle
JavaScript 1.7
HTML
CSS
Resources
Result
var Hello = React.createClass({
  render: function() {
    return <div>Hello here we go {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="James" />,
  document.getElementById('container')
);

HTML

    <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="headline">
<form className="adwords-ad">
    <h2>Enter your Headline</h2>
    <input type="text" ref="adID" required />
    <input type="Submit" />
</form>
</div>
</div>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Is it a requirement that the form sits outside of the react app? It's ok if it is, but if "brought inside" it would simplify things — Chris
– Chris, Commented Apr 13, 2016 at 0:42
@Chris the form could live in the react app i guess. The purpose is just an "ad preview" tool to see what an adwords ad will look like when all of the input fields are returned styled like an adwords ad. — jamesscaggs
– jamesscaggs, Commented Apr 14, 2016 at 17:14

Chris · Accepted Answer · 2016-04-13 01:41:53Z

5

I will make the assumption you are using the form to update message. If so, I would tackle it like this:

Form Submit Version:

https://jsfiddle.net/69z2wepo/38235/

Live Editing Version:

https://jsfiddle.net/65cgjy2b/1/

Live Editing Version - Barebones

https://jsfiddle.net/65cgjy2b/2/

The code below is for the "Form Submit" version, as thats more complex.

var Hello = React.createClass({
  render: function() {
    return <div>{this.props.message}</div>;
  }
});

var Form = React.createClass({
    render: function() {
    return (
      <form onSubmit={this.props.onSubmit} className="adwords-ad">
        <h2>Enter your Headline</h2>
        <input 
          onChange={this.props.onChange} 
          value={this.props.value} 
          type="text" 
          required 
        />
        <input type="Submit" />
      </form>
    );
  }
});

var App = React.createClass({

  getInitialState: function() {
    return { message: "", savedMessage: "" };
  },

  onSubmit: function(e) {
    e.preventDefault();
    this.setState({
      message: "", 
      savedMessage: this.state.message
    });     
  },

  onChange: function(e) {
    this.setState({message: e.target.value});
  },

  render: function() {
    return (
        <div> 
          <Form 
            onSubmit={this.onSubmit} 
            onChange={this.onChange} 
            value={this.state.message} 
          />
          <Hello message={this.state.savedMessage} />
      </div>
    )
  }
});

ReactDOM.render(<App></App>, document.getElementById('container'));

The idea above being that we have an "App" component that manages the state of the application, and gives each components access to callbacks to update the state (when the form is filled and when the form is submitted).

The example above doesn't fill out the heading as you type - although you could easily do it that way - I assumed from your original form (with a submit button) that you only wanted the text to update once the form had submitted.

edited Apr 13, 2016 at 1:41

answered Apr 13, 2016 at 1:04

Chris

58.9k34 gold badges158 silver badges198 bronze badges

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

3 Comments

jamesscaggs Over a year ago

Ok that makes sense but I think your suggestion about returning the input in real time without a submit function is obviously better and requires less code right? Can you share how that code would look differently so I can understand the difference.

Chris Over a year ago

I have included a second link above that has that version. I would say pick the version that suits your requirements - not which has less code, just my 2c

Chris Over a year ago

I have just updated with another link - this is a completely barebones version

Collectives™ on Stack Overflow

How to return text input into React component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related