[React] React实现简单的 输入框与state 的单向数据绑定

React 实现简单的 输入框与state 的单向数据绑定

目录

  • 流程解析
  • 代码概览

流程解析

0. 创建一个React项目

如果这一步不会的话,可以参考我的前两篇博客
[webpack]搭建一个基本的webpack4.x项目(保姆级教程)
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程

  1. 首先我们创建一个React组件,并将其渲染到页面上
  2. 创建 state ,并在其中将 状态变量 声明好
class InputData extends React.Component{
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	render(){
		return <div>
		</div>
  }
}

ReactDOM.render(<div>
   <InputData></InputData> 
</div>,document.querySelector('#app'));
  1. 将要用渲染的元素放到组件的render方法里
    (在这里我们要用到一个输入框也就是 input标签 一个普通文字标签用于检验效果)
  2. 为 input 标签绑定 value属性为 this.state 的msg值,并为其绑定一个onChange事件,绑定一个ref属性用于在方法中获取DOM元素内容
  3. 为 p标签 设置元素内容为 this.state.msg 用于验证效果
render(){
	return <div>
		<input type="text" value={this.state.msg} onChange={()=> this.textChanged()} ref="text"/>
		<p>{this.state.msg}</p>
	</div>
  }
  1. 创建一个组件方法,与刚刚 onChange绑定的(这个方法在每次输入框内容发生改变的时候就会被调用)
  2. 使用 this.setState() 方法将 msg 重新赋值
class InputData extends React.Component{
	constructor(){...}
	render(){...}
	textChanged(){
		this.setState({
			msg:this.refs.text.value
		})
	}
}
  1. 现在的p标签已经可以根据 state的改变而改变了,而state的改变也可以改变input标签的内容了

在这里插入图片描述

代码概览 index.js

import React from 'react'
import ReactDOM from 'react-dom'

class InputData extends React.Component{
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	render(){
		return <div>
			<input type="text" value={this.state.msg} onChange={()=> this.textChanged()} ref="text"/>
      <p>{this.state.msg}</p>
		</div>
  }
  textChanged(){
    this.setState({
      msg:this.refs.text.value
    })
	}
}

ReactDOM.render(<div>
   <InputData></InputData> 
</div>,document.querySelector('#app'));

创作不易 感谢支持 多多点赞

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读