react基础（二）

1.dom节点引用

非受控表单

import{createRef}from 'react'
this.inpRef=createRef()
 <input type="text" ref={this.tempRef} /> 

this.inpRef.current获取节点

2.表单双向绑定

受控表单

  <input value={this.state.msg} />

代码详情

import React, { Component,createRef } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"你好react"
         }
        // 创建一个dom引用
        this.inpRef = createRef();
    }
    getVal=()=>{
        // 获取表单值
        alert(this.inpRef.current.value);
    }
    changeMsg= (e)=>{
        this.setState({msg:e.target.value})
    }
    render() { 
        return ( <div>
            {/* 受控表单-表单双向绑定 */}
            <p>{this.state.msg}</p>
            <input type="text" value={this.state.msg} onChange={this.changeMsg}/><br />
            <input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)}/><br />
            <input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)}/>
            <br />
            {/* 非受控表单 */}
            <input type="text" ref={this.inpRef} />
            <button onClick={this.getVal}>获取值</button>
        </div> );
    }
}
 
export default App;

3.组件

引入图片：

import logo from './logo.svg';

创建组件：

// 一个函数就是就是一个 函数名称是大写 （函数类）
// props参数是单向数据流，是只读
function User(props){
    return <div>
        <div className="avatar">
            <img src={props.item.avatar} alt="" width="80" />
        </div>
        <div>{props.item.name}</div>
        <hr />
    </div>
}
// 默认参数
User.defaultProps = {item:{name:"游客",avatar:logo}}

使用：

<User item={{name:"名字",avatar:logo}}></User>
<User></User>

4.类组件

一个类就是一个组件（class类）

class Produce extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (<div>
            <div>商品图片</div>
            <div>商品的名称</div>
            <div>商品的价格</div>
            <hr />
        </div>);
    }
}

使用：

<Produce></Produce>

5.todoList

import React, { Component,createRef } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {title:"学习vue",done:true},
                {title:"学习react",done:false},
            ]
         }
        //  创建一个dom引用
        this.tempRef = createRef();
    }
    delItem=item=>{
        // 缓存list
        var  list = this.state.list;
        // 查找下标
        var ind =list.findIndex(value=>value.title==item.title);
        // 删除
        list.splice(ind,1);
        // 更新(setState才会触发视图的更新)
        this.setState({list});

    }
    addItem = ()=>{
        // 缓存list
        var  list = this.state.list;
        // 缓存input
        var inp = this.tempRef.current;
        // 添加
        list.unshift({title:inp.value,done:false});
        // 更新视图
        this.setState({list});
        // 清除input内容
        inp.value = '';

    }
    checkItem = item=>{
         // 缓存list
         var  list = this.state.list;
         // 查找下标
         var ind =list.findIndex(value=>value.title==item.title);
        //  值去反
         list[ind].done = !list[ind].done;
        // 更新视图
        this.setState({list});

    }
    render() { 
        return ( <div>
            <input type="text" ref={this.tempRef} />
            <button onClick={this.addItem}>添加</button>
            <h3>正在进行 {this.state.list.filter(item=>!item.done).length}</h3>

            {
                this.state.list.filter(item=>!item.done).map(item=><div className='item' key={item.title}>
                    <input type="checkbox" checked={item.done} onChange={this.checkItem.bind(this,item)} />
                    <span>{item.title}</span>
                    <button onClick={this.delItem.bind(this,item)}>x</button>
                </div>)
            }
              <h3>已经完 {this.state.list.filter(item=>item.done).length}</h3>
            {
                this.state.list.filter(item=>item.done).map(item=><div className='item' key={item.title}>
                    <input type="checkbox" checked={item.done} onChange={this.checkItem.bind(this,item)} />
                    <span>{item.title}</span>
                    <button onClick={this.delItem.bind(this,item)}>x</button>
                </div>)
            }
        </div> );
    }
}
 
export default App;