反應js從輸入字段獲取數據

Question

我對reactjs非常陌生，到目前為止我一直在使用AngularJS。 目前，我正在嘗試學習reactjs。

我有這樣的html代碼

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

我想將輸入字段中鍵入的任何內容保存到數組中，並從數組中訪問該數據以顯示其他位置。 我該如何在reactjs中做到這一點？

提前致謝。

Answer 1

您可以通過兩種方式獲得它：

1-將ref值myInput分配給input，並通過this.refs.myInput.value對其進行this.refs.myInput.value

2-如果在觸發自己的事件時獲得了價值，請通過event.target.value檢索

---

樣本：

 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>