react雕刻网站——react组件（5）

let's go!!····································

我们可以看有报错

问题出在这里

无报错

如果组件中想用变量传进数值来表示呢

这时候会有一个报错

我们缺少了一个super（）函数

我们通过取父级的props指针，通过super函数传递，来指定当前的状态值，在调用的时候需要调用this.state.name来获取相应的变量值

展示如图

那么如何让改变状态值呢。手动更改当然可以，但是明显的不可取，这里我们用setstate方法进行更改

这里的setState方法是从React.Component方法中继承过来的，可以更改状态对象的值

接下来我想实现通过按钮来增加上面的相应的岁数

代码截图

运行代码，此时浏览器报出一个错误

这是因为this指针的指向不明确，按钮的this方法中传递的this.state并找不到相应的state值，也就是说相应的this指针指向不明确，

如果我们需要引用当前的state值，我们需要在声明当前的状态值的时候，绑定this指针的指向

这样就可以了

然而我们每写一个事件就需要绑定一次this，这样的写法其实是繁琐的，

我们可以通过下面的写法即箭头函数来修订作用域

完整JSX

import React from "react";

import ReactDOM from "react-dom";

// import ReactSwiper from 'reactjs-swiper';

import "./index.scss"

class ES6Component extends React.Component{

    constructor(props){

        super(props)

               this.state={

                   name:"wangpenglu",

                   age:12

               }

            //    this.handleClick=this.handleClick.bind(this)

    }

    handleClick(){

       this.setState({

        age:this.state.age+1

       }) 

    }

    render(){

        return(

        

            

我叫{this.state.name},我今年{this.state.age}岁了

            {this.handleClick(e)}}>加一岁

        

        );

    }

}

ReactDOM.render(

          /*组件的返回方法*/

     

        

    

,

    document.getElementById("app")

);

同时如果我们需要一个输入框来实现状态值的改变

e.target。value是输入框的值

代码之间的组件套用

完整的JSX

import React from "react";

import ReactDOM from "react-dom";

// import ReactSwiper from 'reactjs-swiper';

import "./index.scss"

class ES6Component extends React.Component{

    constructor(props){

        super(props)

               this.state={

                   name:"wangpenglu",

                   age:12

               }

            //    this.handleClick=this.handleClick.bind(this)

    }

    handleClick(){

       this.setState({

        age: this.state.age+1

       }) 

    };

    handleOnChange(e){

        this.setState({

            age: e.target.value

        })

    }

    render(){

        return(

        

            

我叫{this.state.name},我今年{this.state.age}岁了

            {this.handleClick(e)}}>加一岁

            {this.handleOnChange(e)}} />

        

        );

    }

}

class App extends React.Component{

    render(){

        return(

            

            {/*容器组件的套用*/}

            

            

---

            {/*单纯组件的套用*/}

            

            

        )

    }

}

class Title extends React.Component{

    constructor(props){

        super(props)

    }

    render(props){

       return(

       

{this.props.children}

       )

    }

}

ReactDOM.render(

          /*组件的返回方法*/

     

        

    

,

    document.getElementById("app")

);

// let ReactSwiperExample = () => {

//     const items = [{

//       image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',

//       title: '图片1',

//       link: 'http://jd.com'

//     }, {

//       image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',

//       title: '图片2',

//     }, {

//       image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',

//       title: '图片3',

//       link: 'http://jd.com'

//     }, {

//       image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',

//       title: '图片4',

//     }];

//     const swiperOptions = {

//       preloadImages: true,

//       autoplay: 4000,

//       autoplayDisableOnInteraction: false

//     };

//     return (

//       

//                    className="swiper-example" />

//     );

//   };

//   ReactDOM.render(

//     , document.getElementById('app')

//   );

// let jsx = jsx......

// ReactDOM.render(

//     jsx,

//     document.getElementById("app")

// );

怎末通过子组件改变父组件的状态值

子组件改变父组件的样式

子元素改变父元素用props,父元素设置当前的状态，在Father组件中设置颜色后传到子组件中

并传送一个callback函数进行数据的回调，在子组件中使用this.props向父级传送参数，实现数据更换

完整的jsx

import React from "react";

import ReactDOM from "react-dom";

// import ReactSwiper from 'reactjs-swiper';

import "./index.scss"

class Child extends React.Component{

    constructor(props){

        super(props)

    }

    handleClick(){

       this.props.changeColor("#333")

    };

    render(){

        return(

        

            

父组件的背景色: {this.props.bgColor}

            {this.handleClick(e)}}>改变父组件的背景颜色

        

        );

    }

}

class Father extends React.Component{

    constructor(props){

        super(props);

        this.state={

             bgColor:"#399"

        }

    }

    callback(color){

        this.setState({

            bgColor:color

        })

    }

    render(props){

       return(

        

        {this.callback(color)}}/>

        

       )

    }

}

ReactDOM.render(

          /*组件的返回方法*/

     

       

    

,

    document.getElementById("app")

);

// let ReactSwiperExample = () => {

//     const items = [{

//       image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',

//       title: '图片1',

//       link: 'http://jd.com'

//     }, {

//       image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',

//       title: '图片2',

//     }, {

//       image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',

//       title: '图片3',

//       link: 'http://jd.com'

//     }, {

//       image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',

//       title: '图片4',

//     }];

//     const swiperOptions = {

//       preloadImages: true,

//       autoplay: 4000,

//       autoplayDisableOnInteraction: false

//     };

//     return (

//       

//                    className="swiper-example" />

//     );

//   };

//   ReactDOM.render(

//     , document.getElementById('app')

//   );

// let jsx = jsx......