react js getting data from a input field

Question

I'm very new to reactjs and I've using AngularJS upto now. Currently i'm trying to learn reactjs.

I have a html code like this

 <div class="status_bar">

                <div>

                    <label class="status_head">Post as: John Smith</label>

                    <input class= 'post_data_input' placeholder="I'm seeking feedback for..."/>
                    .
                    <div class="status_down">

                        <button class="public_btn">Public</button>

                        <button class="post_btn">Post</button>
                        <img class='cam_btn'  src="img/cam.png" alt=""/>

                    </div>

                </div>

            </div>

I want to save whatever typed in the input field to an array and access that data from the array to show somewhere else. How can I do this in reactjs?

Thanks inadvance.

Where is your React code? I don't see any of it? Have you read how to use React? — putvande
– putvande, Commented Jan 22, 2017 at 8:39

Abdennour TOUMI · Accepted Answer · 2017-01-22 09:59:51Z

1

you can get it by two ways , either:

1- assign ref value myInput to input , and retrieve it by this.refs.myInput.value

2 - IF you are getting value on firing its own event , retrieve it by event.target.value

SAMPLE :

class App extends React.Component {
  
  constructor() {
   super(...arguments);
   this.state= {};  
  }
  //Method-1 : this.refs.myInput.value
  onClick() {
    alert('You enter : '+this.refs.myInput.value);
  }
  // METHOD-2 : event.target.value
  onKeyUp(event) {
    const value = event.target.value;
    this.setState({inputSize: value.length || ''}) 
  }
  
  render() {
   return (<div class="status_bar">

                <div>

                    <label class="status_head">Post as: John Smith </label> 

                    <input ref="myInput"  className= 'post_data_input' placeholder="I'm seeking feedback for..." onKeyUp={this.onKeyUp.bind(this)} />
                    .<label>{this.state.inputSize}</label>
                    <div className="status_down">

                        <button className="public_btn" onClick={this.onClick.bind(this)}>Public</button>

                        <button className="post_btn" onClick={this.onClick.bind(this)}>Post</button>
                        <img className='cam_btn'  src="img/cam.png" alt=""/>

                    </div>

                </div>

            </div>)
  }
}
           
           
// -- Mount component           
ReactDOM.render(<App />, document.querySelector('section'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section></section>

edited Jan 22, 2017 at 9:59

answered Jan 22, 2017 at 8:50

Abdennour TOUMI

94.5k42 gold badges271 silver badges274 bronze badges

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

4 Comments

CraZyDroiD Over a year ago

Thank you so much @Abdennour

Abdennour TOUMI Over a year ago

You are welcome.. Sample was added ..You can 🍴 eat it :-)

CraZyDroiD Over a year ago

Thanks alot!! I'll look into this

CraZyDroiD Over a year ago

Hey i'm getting 'bind' undefined error.how can i fix that?

Collectives™ on Stack Overflow

react js getting data from a input field

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related