ref和事件绑定

一：state状态

1·1：函数组件使用状态

函数组件不能使用状态 ，后期会学习其他技术来让函数组件可以使用状态

1·2：类组件使用状态

定义：this.state={}

获取：this.state.xxx

修改： this.setState({ },( )=>{ })

    class Mycon extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                text: "你好，我是states里面的数据"
            }
        }
        
        update=()=>{
            this.setState({
                text:"修改以后的值"
            },
            // 可以通过添一个回调函数来获取异步操作里的值
            ()=>{
               console.log("异步操作里"+this.state.text) 
            })
            console.log("同步操作里"+this.state.text) 
        }

        render() {
            return (
                <div>
                    <h1>state的使用，状态使用</h1>
                    {/*不需要重新渲染，state里面的值会重新自动渲染*/}
                    <h4>{this.state.text}</h4>
                    <button onClick={this.update}>点击修改</button>
                </div>
            )
        }

    }


    ReactDOM.render(<Mycon/>,document.getElementById("demon"))

1·2·1：setState()调用了之后干了什么事情？

• setState()是异步的
• 自动触发render函数的重新渲染

// 修改state
this.setState({
    text:"你好么么哒"
  },()=>{
    //修改以后的数据
    console.log("回调中的打印"+this.state.text)
 })
//原始数据，没有被修改
 console.log(this.state.text)

1·2·2：插入字符串html

使用dangerouslySetInnerHTML={{–html：值}}

  <div>
    <h1>解析字符串标签</h1>   
    <div dangerouslySetInnerHTML ={{_ _html:this.state.html}}></div>

二：ref

2·1:ref的作用

ref的作用是标识组件内部的元素

（也就是说ref可以用来操作dom元素）

ref属性不能应用于函数组件上，因为他们没有实例

2·2:ref的三种使用方法

a:使用字符串

使用ref=“自定义名字”绑定dom

使用this.refs.自定义名字.XXX 修改dom元素样式

 funa = () => {
      this.refs.demona.style.color="red"
	}

   <h1 ref="demona" onClick={this.funa}>ref的主要作用是操作dom元素的</h1>


    ReactDOM.render(<MyCom />, document.getElementById("demon"))

b:使用回调函数(官方推荐)

使用ref={(xiaoming)=>{this.xianghong=xiaoming}}绑定dom

使用 this.xianghong.XXX 修改dom元素样式

 funb = () => {
            this.xianghong.style.backgroundColor="yellow"  
        }
  
<h1 ref={(xiaoming)=>{this.xianghong=xiaoming}} onClick={this.funb}>使用回调函数来操作dom</h1>

c:React.createRef( )

使用ref={this.自定义名字}绑定dom

在constructor里使用this.自定义名字=React.createRef()进行定义

使用his.自定义名字.current.XXX 修改dom元素样式

class MyCom extends React.Component {
        constructor(props) {
            super(props)  
            this.demonref=React.createRef()
        }
      func = () => {
            this.demonref.current.style.backgroundColor="yellow" 
        }

<h1 ref={this.demonref} onClick={this.func}>使用createRef来操作dom</h1>   

三：受控组件

React负责渲染表单的组件。

同时仍然控制用户后续输入时所发生的变化。

值是来自于state控制的 输入表单元素称为“受控组件”。

四：事件处理

React事件绑定属性的命名采用小驼峰式写法。绑定函数的过程中不加() 否则函数会立即执行

阻止默认行为，冒泡等行为与js原生相同

React中阻止默认行为使用preventDefault();

4·1：绑定事件的方式有四种

a:箭头函数的创建

 funa = () => {
            this.setState({
                text: "我是通过箭头函数被修改的"
            })
        }
  <h5>事件绑定的第一个方法---{this.state.text}</h5>
  <button onClick={this.funa}>点击我修改</button>

b:事件调用的写法改为箭头函数的形式

funb = function () {
            this.setState({
                text: "我是通过点击事件的箭头函数被修改的"
            })
        }
 <h5>事件绑定的第二个方法---{this.state.text}</h5>
<button onClick={() => { this.funb() }}>点击我修改</button>

c:通过bind方法进行原地绑定

 func = function () {
            this.setState({
                text: "我是通过bind方法修改的"
            })
        }
 <h5>事件绑定的第三个方法---{this.state.text}</h5>
 <button onClick={this.func.bind(this)}>点击我修改</button>

d:在constructor中提前对事件进行绑定

 class MyCom extends React.Component{
       constructor(props){
        super(props)
        this.state={text:"我是变量"}
   //提前对事件进行绑定        
 this.fund=this.fund.bind(this)
       
       }   
 fund=function(){
       this.setState({
       text:"我被修改了4"
     })
  }

<button onClick={this.fund}>点我修改</button>

4·2：绑定事件传参数到函数中有两种方式

a:bind传递

 class MyCom extends React.Component{
                constructor(props){
                    super(props)
                    this.state={
                        text:"我是变量"
                    }
		}
      fun=(a,b)=>{
                    console.log(a+"---"+b)
              }
   render(){
         return (
            <div>
            <button onClick={this.fun.bind(this,"形参1","形参2")}>点我传递实参</button>       
              </div>
              )
}  

b:箭头函数的回调函数传参

 class MyCom extends React.Component{
                constructor(props){
                    super(props)
                    this.state={
                        text:"我是变量"
                    }
		}
      funb=(a,b)=>{
                    console.log(a+"---"+b)
                }
   render(){
         return (
            <div>
  <button onClick={()=>{this.funb("参数1","参数2")}}>通过箭头函数调用函数的</button>    
              </div>
              )
} 

五：条件渲染

5·1：if的方式

在React中使用if语句条件渲染是最简单的，但是注意jsx中不允许有if

  render() {
            let el;
            if (false) {
                el = (<li>哈哈哈哈</li>)
            }
            else {
                el = (<li>嘎嘎嘎嘎嘎</li>)
            }
            return (
                <div>
                    {el}
                </div>
            )
}

5·2：三目运算符方式

 {false? <p>您好</p>:  <p>您坏</p>}

六：脚手架模式

create-react-app安装

npm install -g create-react-app 安装脚手架

create-react-app --version 查看版本

create-react-app 项目名 创建项目

cd 项目名 切换到创建好的项目中

           <div>
                {el}
            </div>
        )

}

## 5·2：三目运算符方式

```js
 {false? <p>您好</p>:  <p>您坏</p>}

六：脚手架模式

create-react-app安装

npm install -g create-react-app 安装脚手架

create-react-app --version 查看版本

create-react-app 项目名 创建项目

cd 项目名 切换到创建好的项目中

npm start 启动运行