一个简单的小例子,可以做到value值改变的同时,显示出的文字同步更改。
在实例中我们设置了输入框 input 值 value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。
对例子感兴趣的可以直接敲一下,对原理感兴趣的直接去看菜鸟教程文档吧。
http://www.runoob.com/react/react-forms-events.html
import React, { Component } from 'react';
class From extends Component {
constructor(props){
super(props);
// 设置初始值
this.state={value:'你好'}
// 绑定this
this.handleChange = this.handleChange.bind(this)
}
// 监听事件
handleChange(event){
// 获取最新的value值 并改变原值
this.setState({value:event.target.value});
}
render(){
// 将最新的value值 赋值给value
let value = this.state.value;
return(
<div>
{/* 绑定监听事件,渲染最新的value */}
<input type="text" value={value} onChange={this.handleChange}/>
{/* 显示最新的value */}
<h4>{value}</h4>
</div>
)
}
}
export default From ;