[英]react js getting data from a input field
我对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中做到这一点?
提前致谢。
您可以通过两种方式获得它:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.