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'));