[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 

		
  }
}

ReactDOM.render(

    
,document.querySelector('#app'));

3. 将要用渲染的元素放到组件的render方法里
   (在这里我们要用到一个输入框也就是 input标签 一个普通文字标签用于检验效果)
4. 为 input 标签绑定 value属性为 this.state 的msg值，并为其绑定一个onChange事件，绑定一个ref属性用于在方法中获取DOM元素内容
5. 为 p标签 设置元素内容为 this.state.msg 用于验证效果

render(){
	return 

		 this.textChanged()} ref="text"/>
		
{this.state.msg}
	
  }

6. 创建一个组件方法，与刚刚 onChange绑定的(这个方法在每次输入框内容发生改变的时候就会被调用)
7. 使用 this.setState() 方法将 msg 重新赋值

class InputData extends React.Component{
	constructor(){...}
	render(){...}
	textChanged(){
		this.setState({
			msg:this.refs.text.value
		})
	}
}

8. 现在的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 

			 this.textChanged()} ref="text"/>
      
{this.state.msg}
		
  }
  textChanged(){
    this.setState({
      msg:this.refs.text.value
    })
	}
}

ReactDOM.render(

    
,document.querySelector('#app'));

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