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

本文链接：https://blog.csdn.net/m0_46470372/article/details/106293720

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

流程解析

0. 创建一个React项目

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

首先我们创建一个React组件，并将其渲染到页面上
创建 state ，并在其中将状态变量声明好

class InputData extends React.Component{
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	render(){
		return <div>
		</div>
  }
}

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

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

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

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

现在的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'));