一個(gè)簡(jiǎn)單的小例子革屠，可以做到value值改變的同時(shí)盔憨，顯示出的文字同步更改誉尖。
在實(shí)例中我們?cè)O(shè)置了輸入框 input 值 value = {this.state.data}烤咧。在輸入框值發(fā)生變化時(shí)我們可以更新 state。我們可以使用 onChange 事件來(lái)監(jiān)聽(tīng) input 的變化酪耳，并修改 state浓恳。
對(duì)例子感興趣的可以直接敲一下，對(duì)原理感興趣的直接去看菜鳥教程文檔吧碗暗。
http://www.runoob.com/react/react-forms-events.html
import React, { Component } from 'react';
class From extends Component {
constructor(props){
super(props);
// 設(shè)置初始值
this.state={value:'你好'}
// 綁定this
this.handleChange = this.handleChange.bind(this)
}
// 監(jiān)聽(tīng)事件
handleChange(event){
// 獲取最新的value值 并改變?cè)? this.setState({value:event.target.value});
}
render(){
// 將最新的value值 賦值給value
let value = this.state.value;
return(
<div>
{/* 綁定監(jiān)聽(tīng)事件颈将，渲染最新的value */}
<input type="text" value={value} onChange={this.handleChange}/>
{/* 顯示最新的value */}
<h4>{value}</h4>
</div>
)
}
}
export default From ;
