React 表单与事件

一个简单的小例子,可以做到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  ;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。