React属性与事件

1、State属性

image.png

• state属性属于自身属性
• this.state用于初始化
• 初始化可以放在构造函数里面
• 修改state:this.setState({ username:"ddd",age:30 })
• state的作用域只属于当前的类，不污染其他模块

import React from 'react'
import './index.less'

export default class DemoHeader extends React.Component{
    constructor(){
        super();//调用基类的所有初始化方法
        this.state = {
            username : "Parry",
            age : 20
        };
    }
    render(){
        setTimeout(
            () => {
                this.setState({ username:"ddd",age:30 })
            },4000
        );

        return (
            <header>
                <h1>这里是头部测试组件文件</h1>
                <p>{ this.state.username }  { this.state.age }</p>
            </header>
        )
    }
}

2、Props属性

• Props属性属于外来属性
• 传递参数：<DemoHeader userId = {12345} username={"nick"}/>
• 模块中接收参数：
  <p>{ this.state.username } { this.state.age } {this.props.userId} {this.props.username}</p>

import React from 'react'
import DemoHeader from './components/DemoHeader'

export default class Test extends React.Component{
    render(){
        return (
            /*主程序代码中直接加载组件进行使用*/
            <DemoHeader userId = {12345} username={"nick"}/>
        );
    }
}

import React from 'react'
import './index.less'

export default class DemoHeader extends React.Component{
    constructor(){
        super();//调用基类的所有初始化方法
        this.state = {
            username : "Parry",
            age : 20
        };
    }
    render(){
        setTimeout(
            () => {
                this.setState({ username:"ddd",age:30 })
            },4000
        );

        return (
            <header>
                <h1>这里是头部测试组件文件</h1>
                <p>{ this.state.username }  { this.state.age } {this.props.userId} {this.props.username}</p>
            </header>
        )
    }
}

3、事件与数据的双向绑定

• 事件绑定

import React from 'react'
import './index.less'

let names = ['changli','wangwang','hanyue']

export default class DemoHeader extends React.Component{
    constructor(){
        super();//调用基类的所有初始化方法
        this.state = {
            username : "Parry",
            age : 20
        };
    };

    changeUserInfo(){
        this.setState({age:50});
    }

    render(){
/*        setTimeout(
            () => {
                this.setState({ username:"ddd",age:30 })
            },4000);
*/
        return (
            <header>
                <h1>这里是头部测试组件文件</h1>
                <p>{ this.state.username }  { this.state.age } {this.props.userId} {this.props.username}</p>
                <input type="button"  value="提交" onClick={this.changeUserInfo.bind(this)}/>
                { /*names为列表，name为变量名，=> 箭头函数，临时函数*/ }
                { names.map((name,index) => <p key={index}>Hello,I am {name}</p>) }
            </header>
        )
    }
}

运行结果-点击提交前：

image.png

运行结果-点击提交后：

image.png

• 子页面往父页面传参(在子页面中通过调用父页面传递过来的时间props进行组件间的参数传递)
  子页面-indexchild.js：

import React from 'react'

export default class IndexChild extends React.Component{

    render(){
        return(
            <div>
                <p>子页面输入：<input type="text" onChange={this.props.handleChildValueChange}/></p>
            </div>
        )
    }
}

父页面-index.js:

import React from 'react'
import IndexChild from './indexchild'
import './index.less'

let names = ['changli','wangwang','hanyue']

export default class DemoHeader extends React.Component{
    constructor(){
        super();//调用基类的所有初始化方法
        this.state = {
            username : "Parry",
            age : 20
        };
    };

    changeUserInfo(){
        this.setState({age:50});
    };

    handleChildValueChange(event){
        this.setState({
            age:event.target.value
        });
    };

    render(){
/*        setTimeout(
            () => {
                this.setState({ username:"ddd",age:30 })
            },4000);
*/
        return (
            <header>
                <h1>这里是头部测试组件文件</h1>
                <p>{ this.state.username }  { this.state.age } {this.props.userId} {this.props.username}</p>
                <input type="button"  value="提交" onClick={this.changeUserInfo.bind(this)}/>
                { /*names为列表，name为变量名，=> 箭头函数，临时函数*/ }
                { names.map((name,index) => <p key={index}>Hello,I am {name}</p>) }
                <IndexChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
            </header>
        )
    }
}

运行结果：

image.png

4、可复用组件