react基础2

react基础2

react中通过状态获取input框的value值

之前我们说通过ref可以获取现在

我们利用onChage事件获取input框的value，虽然oninput也可以实现

但是官方推荐我们使用onChage，oninput纯属意外

import React,{Component} from 'react'


export default class App extends Component{
    state = {
        mytext:"",
        datalist:[]
    }

    render(){
        return(
            <div>
                {/* <input type="text" ref="mytext"/> */}
                {
                    /*
                        onChage获取 获取每次value的改变
                    */
                }
                 <input type="text" onChange={(ev)=>{
                     console.log(ev.target.value);
                     this.setState({
                         mytext:ev.target.value,
                     })
                 }}/> 
            </div>
        )
    }
}

利用react做个简单的todolist

import React,{Component} from 'react'


export default class App extends Component{
    state = {
        mytext:"",
        datalist:[]
    }

    render(){
        return(
            <div>
                {/* <input type="text" ref="mytext"/> */}
                {
                    /*
                        onChage获取 获取每次value的改变
                    */
                }
                 <input type="text" value={this.state.mytext} onChange={(ev)=>{
                    //  console.log(ev.target.value);
                     this.setState({
                         mytext:ev.target.value,
                     })
                 }}/> 
                 <button onClick={this.handclick}>Add</button>
                 <ul>
                    {
                        this.state.datalist.map((item,index)=>
                            <li key={index}>
                                {item}
                                <button onClick={()=>{this.handdel(index)}}>del</button>
                            </li>
                        )
                    }
                 </ul>
            </div>
        )
    }
    handclick=()=>{
        // this.state.datalist.push(this.state.mytext)
        // console.log(this.state.datalist);
        this.setState({
            datalist:[...this.state.datalist,this.state.mytext],
            mytext:""
        })
    }
    handdel=(index)=>{
        // console.log(index);

        // let newarr = this.state.datalist   //浅赋值改变了原来的状态
        // newarr.splice(index,1);

        // let newarr = this.state.datalist.slice();
        // slice concat ... 都适合
        let newarr = [...this.state.datalist]
        newarr.splice(index,1);
        this.setState({
            datalist:newarr
        })
    }
}

• 这里需要注意的删除的时候深拷贝和浅拷贝

setState的几种写法

• 第一种如果我点击一个按钮让setState调用两次怎么整？

这种方案肯定不行因为setState在一个事件中连续会进行合并

import React,{Component} from 'react'

export default class App extends Component{
    state={
        myname:"kerwein",
        count:1
    }
    render(){
        return(
            <div>
                {this.state.myname}
                {this.state.count}
                <button onClick={this.handleClick1}>add1</button>
            </div>
        )
    }
    handleClick1 = ()=>{
        this.setState({
            count:this.state.count+1
        })
        this.setState({
            count:this.state.count+1
        })
        // 同一事件loop 连续setState 会进行合并
    }
}

第二种写法

        this.setState((prevState)=>{
           return {
                count:prevState.count+1
           }
        })
        this.setState((prevState)=>{
            return {
                 count:prevState.count+1
            }
         })

简写

        this.setState((prevState)=>({
            count:prevState.count+1
        }))

        this.setState((prevState)=>({
            count:prevState.count+1
        }))

这种写法会放在一个队列里底下的会等上面执行完在执行

第三种写法

        this.setState({
            myname:"xiaoming"
        },()=>{
            console.log(this.state.myname)
        })

这种写法 主要作用是可以访问到更改之后干的事情很像vue中的$nextTick

也就是说以下这段代码是异步的，你打印出来的myname肯定是原来的状态

this.setState({
    myname:"xiaoming"
})

console.log(this.state.myname)

react中的显示和隐藏和创建和删除

显示隐藏通过状态三目运算让其显示和隐藏

import React,{Component} from 'react'
import './css/index.css'

export default class App extends Component{
    state = {
        isShow:true,
    }
    render(){
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                }}>show/hide</button>
                <div className={this.state.isShow?'show':''}>11111111111111</div>
            </div>
        )
    }
}

创建和删除

通过三目运算和状态让dom元素创建和删除

import React,{Component} from 'react'
import './css/index.css'

export default class App extends Component{
    state = {
        isShow:true,
        ishide:true
    }
    render(){
        var a = <div>1111111111111</div>
        var b = <div>2222222222222</div>
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                }}>show/hide</button>
                <div className={this.state.isShow?'show':''}>11111111111111</div>
                <button onClick={()=>{
                    this.setState({
                        ishide:!this.state.ishide
                    })
                }}>create/delete</button>
                {
                    this.state.ishide?a:b
                }
            </div>
        )
    }
}

react中 props 父子组件传参

import React,{Component} from 'react'

class Navbar extends Component{
    render(){
        return (
            <div>
                <button>back</button>
                Navbar----{this.props.mytitle}
                <button>home</button>
            </div>
        )
    }
}



export default class App extends Component{
    render(){
        return(
            <div>
                <Navbar mytitle="home"/>
                <Navbar mytitle="list"/>
                <Navbar mytitle="shopcar"/>
            </div>
        )
    }
}

直接通过

{this.props.mytitle}

props验证

Navbar.propTypes= {
    myshow:MyPropTypes.bool
}//属性验证

这样写不加static的话直接在外面定义了一个类属性

加上static在Navbar里面定义一个类属性

import React,{Component} from 'react'
import MyPropTypes from 'prop-types'



class Navbar extends Component{
    static propTypes = {
        myshow:MyPropTypes.bool
    }
    render(){
        return (
            <div>
                <button>back</button>
                Navbar----{this.props.mytitle}
                {
                    this.props.myshow?<button>home</button>:null
                }
                
            </div>
        )
    }
}

// Navbar.propTypes= {
//     myshow:MyPropTypes.bool
// }//属性验证


export default class App extends Component{
    render(){
        return(
            <div>
                <Navbar mytitle="home" myshow={false}/>
                <Navbar mytitle="list" myshow={true}/>
                <Navbar mytitle="shopcar" myshow={true}/>
            </div>
        )
    }
}

//ES6
class Test{
    a="对象属性" //constructor
}

Test.a="类属性"
console.log(Test.a) //类属性
console.log(new Test().a) //对象属性

//ES7

class Test{
    static a="类属性" //等价于上面的写法， 类属性
    a="对象属性" //constructor
}

console.log(Test.a) //类属性
console.log(new Test().a) //对象属性

默认属性

    static defaultProps = {
        myshow:true
    }//默认属性

react中的子传父

react中子传父通过回调函数

import React,{Component} from 'react'

class Navbar extends Component{
    render() {
        return (
            <div style={{background:"red"}}>
                Navbar
                <button onClick={this.handclik}>click</button>
            </div>
        )
    }
    handclik = ()=>{
        this.props.onEvent()
    }
}

class Sidebar extends Component{
    render() {
        return (
            <div style={{background:"yellow"}}>
                Siderbar
                <ul>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                </ul>
            </div>
        )
    }
}


export default class App extends Component{
    state = {
        isShow:false
    }
    render(){
        return(
            <div>
                <Navbar  onEvent={()=>{
                        this.setState({
                            isShow:!this.state.isShow
                        })
                    }}/>
                {
                    this.state.isShow?<Sidebar/>:null
                }
            </div>
        )
    }
}
// vue 父子通信 父传子-->属性  子传父---> 事件
    // vue ref通信

// React 父子通信 父传子-->属性  子传父---> 回调函数
    

react中ref通信

可以直接通过refs获取到这个组件

this.refs.myinput.state.mytext

如果要修改的话在组件中创建一个函数通过refs调用

this.refs.myinput.kerwinrest()

具体案例

import React,{Component} from 'react'

class Input extends Component{
    state = {
        mytext:""
    }
    kerwinrest= ()=>{
        this.setState({
            mytext:""
        })
    }
    render(){
        return(
            <div>
                <input type="text"  value={this.state.mytext}  style={{background:"yellow"}} onChange={(evt)=>{
                    this.setState({
                        mytext:evt.target.value
                    },()=>{
                        // console.log(this.state.mytext);
                    })
                }} />
            </div>
        )
    }
}



export default class App extends Component {
    render() {
        return (
            <div>
                <Input ref="myinput"/>
                <button onClick={this.handclick}>Add</button>
            </div>
        )
    }
    handclick = ()=>{
        //拿到值
        console.log(this.refs.myinput.state.mytext)
        //清空
        this.refs.myinput.kerwinrest()
    }
}