我对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
检索它
2 - 如果您在触发其自己的事件时获得值(value),请通过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>
关于javascript - React js从输入字段获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41788915/