反応するjs入力フィールドからデータを取得する

Question

私はreactjsにはとても新しいので、今までAngularJSを使っています。現在、私はreactjsを学ぼうとしています。

は私がアレイと、アレイからのデータはどこかに表示することにアクセスするために、入力フィールドに入力されたものは何でも保存するこの

<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> 

のようなHTMLコードを持っています。どのように私はreactjsでこれを行うことができますか？

ありがとうございます。

Answer 1

次の2つの方法でそれを得ることができ、次のいずれか

の1-入力にref値myInputを割り当て、this.refs.myInput.value

2でそれを取得する - あなたはそれ自身イベントを発火に値を取得している場合

：、 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>